ViewTransition：finished 属性

有限可用性

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

finished 是 ViewTransition 接口的只读属性，它是一个 Promise，当过渡动画完成并且新页面视图对用户可见且可交互时，它将完成。

仅在相同文档 (SPA) 过渡的情况下，如果传递给 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 不是内置功能；它是一个理论函数，可以使用 导航 API 或类似方法实现。

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅