ViewTransition

有限可用性

此功能不是基线，因为它在一些最广泛使用的浏览器中不起作用。

ViewTransition 接口是 视图转换 API 的一部分，它表示一个活动的视图转换，并提供功能来响应转换达到不同的状态（例如，准备好运行动画或动画完成）或完全跳过转换。

此对象类型可以通过以下方式获得

当视图转换由 startViewTransition() 调用（或在 MPA 转换的情况下进行页面导航）触发时，将按照 视图转换过程 中说明的步骤顺序执行。这还解释了不同 Promise 何时完成。

实例属性

ViewTransition.finished 只读

一个 Promise，当转换动画完成并且新页面视图对用户可见且可交互时，它将被 fulfilled。

ViewTransition.ready 只读

一个 Promise，当伪元素树创建并且转换动画即将开始时，它将被 fulfilled。

ViewTransition.updateCallbackDone 只读

一个 Promise，当 document.startViewTransition() 方法返回的 Promise 被 fulfilled 时，它将被 fulfilled。

实例方法

skipTransition()

跳过视图转换的动画部分，但不跳过运行更新 DOM 的 document.startViewTransition() 回调。

示例

在以下 SPA 示例中，ViewTransition.ready Promise 用于触发一个自定义的圆形显示视图转换，该转换从用户单击时的光标位置开始，动画由 Web 动画 API 提供。

js
// Store the last click event
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // Create a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // Specify which pseudo-element to animate
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}

此动画还需要以下 CSS，以关闭默认的 CSS 动画并阻止旧的和新的视图状态以任何方式混合（新状态“擦除”旧状态的顶部，而不是过渡）

css
::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}

规范

规范
CSS 视图转换模块级别 1
# viewtransition

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅