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.

finished は ViewTransition インターフェイスの読み取り専用のプロパティで、ビュー遷移のアニメーションが完了し、新しいページビューがユーザーに表示され操作可能になると履行されるプロミス (Promise) です。

finished は、同一文書 (SPA) 間の遷移においてのみ、document.startViewTransition() に渡されたコールバックが例外を発生させるか、拒否されたプロミスを返した場合にのみ拒否されます。これは、ページの新しい状態が生成されなかったことを示します。

遷移のアニメーションが開始されなかったり、ViewTransition.skipTransition() を使用して遷移中にスキップされた場合でも、終了状態に到達しているため、 finished は履行されます。

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 などを使用して実装できるかもしれません。