View Transition API でなめらかな表示切替
document.startViewTransition() で DOM 変更前後を自動補間アニメーション。ブラウザネイティブの View Transitions API でリスト→グリッド切替を演出。
解説
View Transition API でなめらかな表示切替は、アニメーションカテゴリの「view-transition」に分類される実装パターンです。CSS と JavaScript の組み合わせで構成され、難易度は中級レベル。
View Transitions API は、DOM の前後差分を「自動でアニメーション補間」してくれる強力な機能です。これまで React Spring や Framer Motion のような重量級ライブラリが必要だった「ふわっと切り替わる」演出が、ブラウザ標準だけで実装できます。
このサンプルでは、リスト表示とグリッド表示を切り替える際、document.startViewTransition(() => 描画変更) で囲むだけで、要素のフェード + サイズ変化が自動でアニメーションされます。
仕組み
下記コードタブから HTML / CSS / JS をそれぞれ確認・コピーできます。プレビュー領域では実際の動作をその場で確認可能です。
JavaScript 部分は vanilla（プレーン）JS で書かれており、jQuery / React / Vue いずれの環境にも持ち込めます。
アニメーションのタイミング（duration / easing）は CSS の transition や animation プロパティで簡単に調整できます。サイトの世界観に合わせて微調整してください。
注意点 / カスタマイズ時のポイント
Chrome / Edge 111+、Safari 18+ で対応。Firefox は未対応（2026 年時点）。document.startViewTransition の存在チェックは必須で、未対応ブラウザではただ即座に切り替わる動作にフォールバックします。
SPA のページ遷移でも使えますが、view-transition-name をうまく付けないと「全体クロスフェード」になり個別要素のアニメーションが消えるので注意。
よくある質問
ページ遷移にも使えますか？
@view-transition { navigation: auto; } を CSS に書くだけで有効化できます（Chrome 126+）。個別の要素にカスタムアニメーションを付けたい
view-transition-name: hero 等を付け、::view-transition-old(hero) / ::view-transition-new(hero) 疑似要素で個別アニメーションを定義できます。このスニペットは商用利用できますか？
そのまま貼り付ければ動きますか？
ブラウザ対応は？
jQuery でも書けますか？
document.querySelector を $() に置き換える程度で動作しますが、近年は jQuery を使わない方が軽量で推奨されます。