画面切り替えにアニメーションを付けたいとき、

• CSSでアニメーションを設定
• transform で移動や拡大を制御
• JavaScriptで表示切り替え

…と、意外とやることが多くなりがちです。
特に、

• 一覧 → 詳細
• サムネイル → 拡大表示
• カード → モーダル

のように、要素の位置やサイズが大きく変わるUIは、調整が少し大変です。
そんなとき便利なのが、『View Transitions API』 です。

View Transitions APIは何をしてくれるの？

画面の切り替え自体は、JavaScriptだけでもできます。
View Transitions APIが便利なのは、変更前と変更後を自然なアニメーションでつないでくれることです。

使い方はシンプルで、画面を書き換える処理を document.startViewTransition()で囲むだけ。

document.startViewTransition(() => { detail.classList.add("show"); });

たったこれだけで、ブラウザが変更前と変更後を比較し、間の動きを自動で補間してくれます。
つまり、

•  JavaScript → 何を表示するか
• View Transitions API → どう見せるか

という役割です。
今回は、カード一覧から詳細表示へ切り替えるサンプルで試してみます。
まずはこちらのデモの画像を押してみてください。

ポイント

• cssでview-transition-name: product-image;と一覧側と詳細側の画像に同じ名前を付けることで、ブラウザが「同じ要素」と認識し、拡大や移動を自然につないでくれます。
• jsで、document.startViewTransition(() => を使うことで、通常なら一瞬で切り替わる表示も、これで滑らかな画面遷移になります。

まとめ

View Transitions APIは、切り替えを自然に見せたいUIで特に効果を発揮します。

特に、

•  一覧 → 詳細
• サムネイル → 拡大
• カード → フル表示

のようなUIで効果を発揮します。

少ないコードで実装できるのが大きな魅力ですね。