View Transition API を使用すると、ウェブサイトのさまざまなビュー間でシームレスな視覚的な遷移を作成できます。これにより、マルチページ アプリケーション（MPA）として構築されているか、シングルページ アプリケーション（SPA）として構築されている場合でも、サイト内を移動する際に視覚的な魅力のあるユーザー エクスペリエンスを実現できます。
ビュー遷移を使用する一般的な状況は次のとおりです。
- 商品リスティング ページのサムネイル画像。商品の詳細ページではフルサイズの商品画像に切り替わります。
- ページからページを移動しても常に表示される、固定されたナビゲーション バー。
- フィルタ処理に伴って位置が移動するアイテムを示すグリッド。
ビュー遷移を実装する
ビュー遷移は特定のアプリケーション アーキテクチャやフレームワークに縛られるのではなく、単一のドキュメントに対してだけでなく、2 つの異なるドキュメント間でもトリガーできます。
どちらのタイプのビュー遷移も、同じ構成要素と原則に基づいています。
- ブラウザは、新旧の状態のスナップショットを作成します。
- レンダリングが抑制されている間に DOM が更新されます。
- 遷移には CSS アニメーションが利用されます。
両方のタイプで異なる点は、トリガーする方法です。
同一ドキュメント ビュー遷移
1 つのドキュメントに対して実行されるビューの遷移を「同一ドキュメント ビュー遷移」と呼びます。これは通常、シングルページ アプリケーション（SPA）に当てはまります。Chrome 111 以降、同一ドキュメント ビューの移行がサポートされます。
トリガーの方法
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 です。
<ph type="x-smartling-placeholder">構築を開始
同一ドキュメント ビューの移行に関するすべての知識については、専用のドキュメント ページをご覧ください。
ドキュメント間のビュー遷移
2 つの異なるドキュメント間でビューの遷移が発生することを、ドキュメント間のビュー遷移と呼びます。これは MPA では一般的です。Chrome 126 以降では、ドキュメント間のビューの移行がサポートされています。
トリガーの方法
両方のページでオプトインしている場合は、同一オリジンのクロスドキュメント ナビゲーションによってドキュメント間のビューの移行がトリガーされます。つまり、ドキュメント間のビュー移行を開始するために呼び出す API はありません。ユーザーがリンクをクリックすると、ビュー遷移がトリガーされます。
オプトインするには、次の CSS スニペットを使用してください。
@view-transition {
navigation: auto;
}
例
次の Stack Navigator の例は、2 つの異なるドキュメント間でドキュメント間のビュー遷移を使用する MPA です。ページを掘り下げるかどうかによって、ページがスタックにプッシュされたり、ポップオフされたりします。
<ph type="x-smartling-placeholder">構築を開始
ドキュメント間のビュー遷移について知っておくべきすべての情報をご紹介します。