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