ビュー遷移 API: ブラウザーでのページと状態のスムーズな変化
View Transitions API の機能、同一ドキュメントおよびクロスドキュメントのトランジションがどのように機能するか、CSS を使用してトランジションをスタイル設定する方法、およびそれらを責任を持って使用する方法。
核心
View Transitions API を使用すると、ブラウザはページの 2 つの状態の間でアニメーションを実行できます。 DOM を更新する関数を使用して document.startViewTransition() を呼び出すと、ブラウザーが古いビューと新しいビューのスナップショットを作成し、それらの間でアニメーション化します。これは、::view-transition 擬似要素でスタイル設定できます。これは、単一ページのアプリ内で機能し、サポートされているブラウザーではページ ナビゲーション全体で機能します。
仕組み
MDN は、document.startViewTransition() を、単一ページ アプリで一般的な、同じドキュメント ビューの遷移の開始として説明します。ブラウザーは現在のビューをキャプチャし、更新を実行し、新しいビューをキャプチャして、それらの間でアニメーションを実行します。デフォルトでは、これはクロスフェードです。 CSS で変更できます。
同一ドキュメントとクロスドキュメント
SPA と同様に、同じドキュメントのトランジションは 1 ページ内で実行され、Chrome は Chrome 111 以降、それらのトランジションをサポートしています。ドキュメント間のトランジションは、複数ページのサイトの別々のページ間でアニメーション化されますが、MDN はこれまで不可能だったと指摘しています。これらは、pageswap イベントと pagereveal イベント、および CSS のオプトインを使用します。ブラウザのサポートは 2 つ間で異なるため、現在の互換性テーブルを確認してください。
トランジションのスタイリング
ほとんどのカスタマイズはプレーンな CSS です。
- 要素に view-transition-name を付けて、サムネイルがヒーロー画像に成長するなど、ページの残りの部分とは別にアニメーション化します。
- ::view-transition-old() および ::view-transition-new() をターゲットにしてアニメーションをカスタマイズします。
- 持続時間は短くし、動きに意味を持たせてください。
- カスタム アニメーションを pres-reduced-motion チェックでラップします。
段階的な強化
API を呼び出す前に必ずサポートを確認し、DOM が見つからない場合は直接更新してください。ページはアニメーションなしでも同様に動作するはずです。サイト全体が遅く感じる原因となるナビゲーションでの長い遷移は避けてください。
実装コード例
// Same-document transition with a safe fallback
function navigate(updateDom) {
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) {
updateDom();
return;
}
document.startViewTransition(() => updateDom());
}
/* CSS: animate one element on its own */
.product-image { view-transition-name: product-image; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 200ms;
}覚えておきたい原則
- startViewTransition() は古いビューと新しいビューのスナップショットを作成し、それらの間でアニメーションを作成します。
- 同一ドキュメント (SPA) およびクロスドキュメント (複数ページ) のバリアントが存在します。
- view-transition-name および ::view-transition 擬似要素を使用したスタイル
- サポートを確認し、即時アップデートにフォールバックします
- トランジションを短くし、モーションの軽減を尊重します
よくある質問
出典
- View Transition API — MDN ウェブ ドキュメント
- Smooth transitions with the View Transition API — 開発者向け Chrome