1. 開発者向けのウェブ技術
  2. Web API
  3. ViewTransition
  4. finished

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

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

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告