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 |
瀏覽器相容性
載入中…