ViewTransition

Limited availability

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

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

View Transitions API 的 ViewTransition 接口表示视图过渡，并提供了在过渡到达不同状态时运行代码的功能（例如，准备运行动画，或动画完成），或跳过视图过渡。

此对象类型由 document.startViewTransition() 方法返回。当调用 startViewTransition() 时，将按照视图过渡过程中所述的步骤序列进行。这也解释了不同的 Promise 何时兑现。

实例属性

ViewTransition.finished

一个在过渡动画完成后兑现的 Promise，新的页面视图对用户可见且可交互。

ViewTransition.ready

一个在伪元素树创建且过渡动画即将开始时兑现的 Promise。

ViewTransition.updateCallbackDone

当 document.startViewTransition() 的回调返回的 Promise 兑现时，该 Promise 也会兑现。

实例方法

skipTransition()

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

示例

在下面的示例中，ViewTransition.ready 用于触发从用户点击位置开始的自定义圆形揭示视图过渡，动画由 Web Animations API 提供。

js
// 保存最后一次点击事件
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // 为不支持此 API 的浏览器提供回退方案：
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // 获取点击位置，或者回退到屏幕中间
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // 获取到最远角的距离
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // 开始一次视图过渡：
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // 等待伪元素创建完成：
  transition.ready.then(() => {
    // 新视图的根元素动画
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // 指定要附加动画的伪元素
        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;
}

规范

Specification
CSS View Transitions Module Level 1
# viewtransition

浏览器兼容性

BCD tables only load in the browser

参见