ViewTransition

Limited availability

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

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

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

此对象类型由 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

参见