View Transition API
DOM を「変える前」と「変えた後」をブラウザが自動でスナップショットし、その間を補間する Web 標準 API。 単純なクロスフェードから、リスト→詳細の hero 遷移、ダーク/ライト切替の円形展開まで、 従来は JS+CSS で頑張っていたものが 数行で書けるようになる。
これは何か
View Transition API は、DOM の状態 A から状態 B へ移る瞬間にブラウザが間を補間してくれる仕組み。 自分でやるのは「状態を変える」ことだけで、「変わって見える」アニメーションはブラウザに任せる。
- 同一ドキュメント版:
document.startViewTransition(() => updateDOM()) - クロスドキュメント版:
@view-transition { navigation: auto; }で別ページへの遷移にも適用
30秒のメンタルモデル
- ブラウザが今の画面のスナップショット（=古い見た目）を撮る。
- あなたが渡したコールバックの中でDOM を更新する。
- ブラウザが新しい画面のスナップショット（=新しい見た目）を撮る。
- 古い画面と新しい画面が疑似要素として最前面に重ねられ、CSS アニメーションで補間される。
- アニメ完了後、疑似要素ツリーが消えて、本物の DOM が見える。
デフォルトのアニメーションは 250ms のクロスフェード。これだけなら何も書かなくても動く。
個別の要素に view-transition-name を付ければ、その要素は独立して位置・大きさが補間される（いわゆる morph）。
最小コード
ボタンを押したら数値を切り替えるだけの例。これでクロスフェードする。
index.html（抜粋）
<output id="counter">0</output>
<button id="inc">+1</button>
<script>
const out = document.getElementById("counter")
document.getElementById("inc").addEventListener("click", () => {
const next = Number(out.textContent) + 1
if (!document.startViewTransition) {
out.textContent = next
return
}
document.startViewTransition(() => { out.textContent = next })
})
</script>嬉しいユースケース
- SPA のルート切替 — クリック前後の画面をブラウザに繋がせる
- リスト → 詳細 — サムネイルがそのまま大きく拡大されるような遷移
- ダーク/ライトトグル — クリック位置を起点にした円形展開
- 並べ替え・フィルタ — FLIP を手書きする代わり
- ダイアログ open/close — 開閉アニメーションを CSS だけで
- マルチページサイトの遷移 — クロスドキュメント版なら通常リンクのままで遷移アニメ
前提
仕様は2階建てで、Level 1 が同一ドキュメント（startViewTransition）、
Level 2 がクロスドキュメントと types 付き呼び出し。
ブラウザによって対応の到達状況が違うので、ブラウザ対応 を最初に確認しておくと安心。