View Transitions APIの実例
View Transitions API：SPAとマルチページの動く実例 | We.Inc
動くView Transitions APIの実例集です。並べ替えできるリストでのstartViewTransition、変形する名前付き要素、ページ間の遷移、タイプ指定、Reactでの使い方、対応状況を解説します。
View Transitions APIの実例
View Transitions APIは、ページの2つの状態の間をアニメーションでつなぎます。シングルページアプリでは、DOMの更新を document.startViewTransition(() => update()) で包みます。同じオリジンのページ間では、両方のページに @view-transition { navigation: auto; } を追加します。要素に一意のview-transition-nameを付けると、ブラウザーがその要素を古い位置から新しい位置へ変形させます。
2種類のビュー遷移
- 同一ドキュメント（SPA）
- ドキュメント間（MPA）
- 開始方法
- document.startViewTransition()
- 両方のページに @view-transition { navigation: auto; }
- Baseline
- 新たに利用可能（2025年10月）
- Baselineではない
ビュー遷移の解説の多くは、疑似要素のツリーを説明して終わります。このページでは、まずブラウザーで動くデモから始めます。グリッドを並べ替え、カードを詳細表示に開き、名前付きの要素が動く様子を見てください。その後、各パターンのコード、ページ間の設定、未対応ブラウザー向けの代替処理を紹介します。
- 「シャッフル」を押してグリッドを並べ替えます。各タイルには固有のview-transition-nameがあるので、それぞれが新しい位置へ滑らかに移動します。
- タイルをクリックして開きます。色のブロックとタイトルは詳細表示と同じ名前を持つため、詳細表示へと変形します。
- ブラウザーがこのAPIに対応していなくても、デモは即座に更新され、その旨を表示します。
- プレーンなJavaScript、React、マルチページサイト向けの下のスニペットをコピーします。
- スナップショットを撮る時点で、ページ上のすべての遷移名は一意でなければなりません。重複があるとready のプロミスが拒否され、遷移はスキップされます。
- 同一ドキュメントの遷移では、view-transition-name: match-element を使うとリストの各項目に自動で名前が付きます。
- データは遷移を開始する前に取得しましょう。更新コールバックの実行中は描画が止まるため、遅いコールバックはフリーズしたように見えます。
- 呼び出す前にdocument.startViewTransitionがあるかを確認し、なければ更新だけを実行しましょう。
- 動きを減らす設定（prefers-reduced-motion: reduce）のクエリ内ではアニメーションを控えめにしましょう。状態の変更自体は行われます。
よくある質問
document.startViewTransitionは何をしますか？
現在のページのスナップショットを撮り、更新コールバックを実行し、古いスナップショットから実際の新しい状態へアニメーションします。戻り値はViewTransitionオブジェクトで、ready、finished、updateCallbackDoneの各プロミスとskipTransition()メソッドを持ちます。
ページ間にビュー遷移を追加するには？
移動元のページと移動先のページの両方のCSSに @view-transition { navigation: auto; } を書きます。ページは同じオリジンである必要があり、デフォルトではクロスフェードになります。対応する要素に両方のページで同じ遷移名を付けると、変形させられます。
ビュー遷移はFirefoxで動きますか？
同一ドキュメントの遷移はFirefox 144から動きます。執筆時点ではドキュメント間の遷移はFirefoxで未対応だったため、そうしたブラウザーではアニメーションなしで普通にページが移動します。
Reactでビュー遷移を使うには？
document.startViewTransitionを呼び出し、react-domのflushSyncの中で状態を更新します。こうすると、ブラウザーが新しいスナップショットを撮る前に、Reactが新しいDOMを同期的に書き込みます。
アニメーションをカスタマイズするには？
疑似要素にスタイルを当てます。::view-transition-old(name) が出ていくスナップショット、::view-transition-new(name) が入ってくるスナップショットで、::view-transition-group(name) がサイズと位置を制御します。ページ全体には名前としてrootを使います。
遷移中に起きていること
- ブラウザーは現在の状態を画像として取り込みます。ページ全体で1枚、名前付きの要素ごとに1枚です。描画を一時停止したまま更新を実行し、その後新しい状態を取り込みます。
- 続いてページの上に疑似要素のツリーを作ります。名前ごとにグループがあり、それぞれ古い画像と新しい画像を持ちます。デフォルトでは、グループがサイズと位置をアニメーションさせ、2枚の画像がクロスフェードします。これが変形の効果を生みます。
要素にうまく名前を付ける
- 名前は、古い状態の要素と新しい状態の要素を結び付けます。一覧の商品写真と詳細ページの大きな写真に product-42 のような同じ名前を付けると、ブラウザーが一方からもう一方へアニメーションさせます。
- 名前は必要な場所にだけ付けましょう。変化しない要素に名前を付けても、別のスナップショットを撮るコストがかかります。
方向ごとのタイプ
- startViewTransitionは、更新関数とタイプの配列を持つオプションのオブジェクトも受け取れます。「進む」や「戻る」といったタイプは、CSSの :active-view-transition-type() セレクターで照合できるので、戻るときは逆方向にスライドさせられます。
- ページ間の移動では、@view-transition内のタイプ記述子で同じようにタイプを設定します。
同一ドキュメントの遷移
機能検出付きのstartViewTransition
このAPIのないブラウザーではすぐに更新を実行するので、何も壊れません。
サムネイルをヒーロー画像へ変形させる
名前を持てるのは一度に1つの要素だけなので、遷移の直前に、クリックされたサムネイルに名前を設定します。
React
flushSyncを使ったstartViewTransition
flushSyncにより、Reactがコールバック内で新しいDOMを確定させます。
ドキュメント間の遷移
マルチページサイトのページ間をスライドする
遷移に参加させたいすべてのページのスタイルシートにこれを含めます。同じオリジンの場合のみです。
APIリファレンス
View Transitions APIの構成要素
- document.startViewTransition(update)
- メソッド
- 同一ドキュメントの遷移を開始し、ViewTransitionを返す
- ViewTransition.ready
- Promise
- 疑似要素ができてアニメーションが始まる直前に解決する
- ViewTransition.finished
- Promise
- アニメーションが終わり、新しい状態が有効になったときに解決する
- ViewTransition.updateCallbackDone
- Promise
- 更新コールバックが完了したときに解決する
- ViewTransition.skipTransition()
- メソッド
- アニメーションをスキップする。更新は実行される
- CSSプロパティ
- 要素に変形用の独自のスナップショットを持たせる
- @view-transition
- CSSのアットルール
- ページをドキュメント間の遷移に参加させる
- ::view-transition-old() / -new()
- 疑似要素
- 出ていくスナップショットと入ってくるスナップショット
- ::view-transition-group()
- 疑似要素
- 1つの名前のサイズと位置をアニメーションさせる
- pageswap / pagereveal
- イベント
- スクリプトでドキュメント間の遷移を調整できる
動きを減らす設定が有効なため、即座に切り替わりました。
お使いのブラウザーはビュー遷移に対応していないため、即座に切り替わりました。
ライブデモ
グリッドを並べ替えるか、カードを開いてください。各タイルには固有のview-transition-nameがあるので、ブラウザーが新しい位置へアニメーションさせます。
シャッフル
グリッドに戻る
色のブロックとタイトルは、ここでも同じ名前を保っているため、グリッドから変形しました。
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る