View Transition API を使用すると、ウェブサイトのさまざまなビュー間でシームレスな視覚的な遷移を作成できます。これにより、マルチページ アプリケーション（MPA）とシングルページ アプリケーション（SPA）のどちらで作成されている場合でも、サイト内を移動するユーザーの視覚的により魅力的なユーザー エクスペリエンスを実現できます。
ビュー遷移を使用する一般的な状況は次のとおりです。
- 商品リスティング ページのサムネイル画像。商品の詳細ページでフルサイズの商品画像に遷移します。
- ページ間を移動しても固定されたナビゲーション バー。
- フィルタによって位置が移動する項目を含むグリッド。
ビュー遷移を実装する
ビュー遷移は、特定のアプリケーション アーキテクチャやフレームワークに関連付けられていないため、1 つのドキュメントだけでなく、2 つの異なるドキュメント間でもトリガーできます。
どちらのタイプのビュー遷移も、まったく同じ構成要素と原則に依存しています。
- ブラウザは、新旧の状態のスナップショットを作成します。
- レンダリングが抑制されている間に DOM が更新される。
- この遷移は CSS アニメーションを利用しています。
どちらのタイプでも、トリガー方法が異なります。
同一ドキュメント ビューの移行
単一ドキュメントで実行されるビュー遷移を、同一ドキュメントのビュー遷移と呼びます。一般的には、シングルページ アプリケーション（SPA）がこれに該当します。Chrome 111 以降の Chrome では、同じドキュメントの表示遷移がサポートされています。
トリガー方法
document.startViewTransition を呼び出して、同じドキュメント ビューの遷移をトリガーします。
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
例
次のカードの例は、同じドキュメント ビュー遷移を使用して、新しいカードが追加または削除されるとカードをアニメーション化する SPA です。
構築を開始
同一ドキュメント ビューの遷移について詳しくは、専用のドキュメント ページをご覧ください。
ドキュメント間のビュー遷移
2 つの異なるドキュメント間でビュー遷移が発生することを、ドキュメント間のビュー遷移といいます。これは MPA では一般的です。Chrome 126 以降では、ドキュメント間のビュー遷移がサポートされています。
トリガー方法
ドキュメント間のビュー移行は、同一オリジンのドキュメント間ナビゲーションによってトリガーされます（両方のページでオプトインされている場合）。つまり、ドキュメント間のビュー遷移を開始するために呼び出す API はありません。ユーザーがリンクをクリックすると、ビュー遷移がトリガーされます。
上位のオプトインの場合は、次の CSS スニペットを使用します。
@view-transition {
navigation: auto;
}
例
次の Stack Navigator の例は、2 つの異なるドキュメント間でドキュメント間のビュー遷移を使用する MPA です。より深くナビゲーションするかどうかによって、ページがスタックにプッシュされるか、ポップオフされます。
構築を開始
ドキュメント間のビュー遷移について知っておくべきことをすべて学びます。