NavigateEvent：hasUAVisualTransition 属性

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

NavigateEvent 接口的 hasUAVisualTransition 只读属性在用户代理分派此事件之前已为此导航执行了可视化的过渡时返回 true，否则返回 false。

用户代理在执行站点导航时可能会提供内置的可视化的过渡。如果站点作者还添加了可视化的过渡，则用户代理和作者的过渡可能会发生冲突并让访问者感到困惑。该属性可让你检测用户代理是否提供了过渡，以便你可以跳过作者的过渡以获得更好的用户体验。

值

布尔值。

示例

js
navigation.addEventListener("navigate", (event) => {
  // 有些导航，例如跨源导航，我们无法拦截。让浏览器正常处理这些导航。
  if (!event.canIntercept) {
    return;
  }

  // 不要拦截片段导航或下载。
  if (event.hashChange || event.downloadRequest !== null) {
    return;
  }

  event.intercept({
    handler() {
      // 获取新内容
      const newContent = await fetchNewContent(event.destination.url, {
        signal: event.signal,
      });

      // 用户代理不支持视图转换，或者用户代理本身已经提供了可视化的过渡（例如向后滑动）。无论哪种情况，都直接更新 DOM
      if (!document.startViewTransition || event.hasUAVisualTransition) {
        doSinglePageAppNav(newContent);
        return;
      }

      // 使用视图过渡更新内容
      document.startViewTransition(() => {
        doSinglePageAppNav(newContent);
      });
    },
  });
});

规范

Specification
HTML
# dom-navigateevent-hasuavisualtransition

浏览器兼容性

BCD tables only load in the browser

参见