スキル自身の言葉で
React の View Transition API を使って UI の状態間をアニメーションさせるためのガイドです。ViewTransition コンポーネントで「何を」を宣言し、startTransition、useDeferredValue、あるいは Suspense で「いつ」をトリガーし、CSS クラスで「どのように」を制御します。固定された優先順位で並ぶ 5 つのパターン（共有要素のモーフ、リストの ID、状態変化、ルート変化）に加え、addTransitionType によるタイプキー付きの方向性ナビゲーションと Next.js App Router との連携も扱います。
ViewTransition の境界をどこに置くべきか、default="none" が必要になるのはいつか、どのブラウザがサポートしているか（Chromium 125+、Firefox 144+、Safari 18.2+）、それ以外の環境でのグレースフルデグラデーションについて説明し、実装順序、CSS レシピ、パターン、トラブルシューティングのための参照ファイルを示します。
生成されるもの
- 複数ページのアプリのために、タイプキー付きの enter・exit マップを保持する再利用可能な方向性ラッパーコンポーネントです。
- アンマウントされるビューとマウントされるビューで同じ名前を再利用することで作成される共有要素モーフです。例えば、サムネイルがヒーロー画像になる場合などです。
- ビュートランジションの疑似要素に紐づけられたCSSルールで、両方のスナップショットを保持する画像ペアを含みます。
- サポートされていないブラウザではナビゲーションを壊さずにアニメーションをスキップする、段階的に劣化する実装です。
仕組み
- 01アニメーションが何を表しているかを見極める
表現している空間的な関係や連続性を言葉で説明できる場合にのみ、境界を追加してください。それが何を伝えているか説明できない場合は、追加しないでください。
- 02状態を境界でラップする
Reactは内部で一意のview-transition-nameを割り当て、document.startViewTransitionを呼び出すため、startViewTransitionを自分で呼び出すことはありません。
- 03トランジションでトリガーする
エンター、エグジット、アップデート、シェアは、startTransition、useDeferredValue、Suspenseからのみ発火します。通常のsetStateでは何もアニメーションしません。
- 04CSSでスナップショットをスタイリングする
アウトゴーイングとインカミングのスナップショットは、独自のクラス名を持つビュートランジション疑似要素を通じてターゲットされ、レシピファイルがすぐに使えるアニメーションを提供します。
- 05トランジションタイプでタグ付けする
addTransitionTypeはコンテキストタイプをスタックし、ツリー内の異なる境界がそれぞれ異なる反応をするようにします。タイプごとのオブジェクトは、これらのタイプをエンター、エグジット、シェア時のCSSクラスにマッピングします。