ViewTransition: finished 属性
ViewTransition 接口的 finished 只读属性是一个 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 不是内置功能；它是一个理论上的函数，可以使用 Navigation API 或类似方式实现。
规范
| 规范 |
|---|
| CSS 视图过渡模块第 1 级 # dom-viewtransition-finished |
浏览器兼容性
加载中…