ViewTransition：finished 属性
Baseline
2025
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or 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 |
浏览器兼容性
Loading…