ViewTransition：finished 属性

Limited availability

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

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

ViewTransition 接口的 finished 只读属性是一个 Promise。会在过渡动画完成（新的页面视图对用户可见且可交互）时兑现。

仅当传递给 document.startViewTransition() 的回调函数抛出异常或返回的 Promise 被拒绝时，finished 才会被拒绝，这表示页面的新状态未被创建。

如果过渡动画无法开始，或在动画期间使用 ViewTransition.skipTransition() 跳过了过渡动画，那么视图过渡依旧可以到达最终状态，因此 finished 依旧会被兑现。

值

一个 promise。

示例

不同的导航使用不同的过渡效果

有时，某些导航需要特定的过渡效果，例如后退导航可能与前进导航的过渡效果不同。处理这种情况的最佳实践是在 <html> 元素上设置一个类名以处理过渡（使用特定的选择器应用正确的动画），然后在过渡结束后删除该类名。

js
async function handleTransition() {
  if (isBackNavigation) {
    document.documentElement.classList.add("back-transition");
  }

  const transition = document.startViewTransition(() =>
    updateTheDOMSomehow(data),
  );

  try {
    await transition.finished;
  } finally {
    document.documentElement.classList.remove("back-transition");
  }
}

备注： isBackNavigation 不是内置特性；它是一个理论上存在的函数，可以使用 Navigation API 或类似的特性实现。

规范

Specification
CSS View Transitions Module Level 1
# dom-viewtransition-finished

浏览器兼容性

BCD tables only load in the browser

参见