ViewTransition: finished プロパティ
Baseline
2025
最近利用可能
October 2025以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
finished は ViewTransition インターフェイスの読み取り専用のプロパティで、ビュー遷移のアニメーションが完了し、新しいページビューがユーザーに表示され操作可能になると履行されるプロミス (Promise) です。
finished は、同一文書 (SPA) 間の遷移においてのみ、document.startViewTransition() に渡されたコールバックが例外を発生させるか、拒否されたプロミスを返した場合にのみ拒否されます。これは、ページの新しい状態が生成されなかったことを示します。
遷移のアニメーションが開始されなかったり、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 View Transitions Module Level 1 # dom-viewtransition-finished |