View Transition API でなめらかな表示切替
document.startViewTransition() で DOM 変更前後を自動補間アニメーション。ブラウザネイティブの View Transitions API でリスト→グリッド切替を演出。
解説
ボタンを押すと表示内容がリスト表示とグリッド表示で切り替わり、その瞬間がパッと入れ替わるのではなく、なめらかにクロスフェードする演出です。鍵になるのは document.startViewTransition() という View Transition API で、切り替え前後の画面をブラウザが自動でつなぎ、その間を補間してアニメーションにしてくれます。対象の枠には view-transition-name を付け、どこを連続的に変化させるかを指定します。
表示モードの切り替え、タブの内容の入れ替えなど、内容が差し替わる場面の「唐突さ」をやわらげたいときに向きます。自前でフェードや位置補間を書くと複雑になりがちですが、この API は startViewTransition() で囲んで DOM を更新するだけで滑らかな遷移が得られます。
カスタマイズと注意点
- 切り替え後の中身は
render()関数内の HTML を編集します。 - 遷移の速さや効果は、View Transition 用の擬似要素に CSS で
animationを当てて調整できます。 - API 未対応のブラウザでは遷移が省略され内容だけが瞬時に切り替わるので、
startViewTransitionの有無を確認して呼ぶと安全です。動きに敏感な人にはprefers-reduced-motionでの簡素化も有効です。
よくある質問
View Transition API に対応していないブラウザではどうなりますか？
アニメーションが省略され、内容だけが瞬時に切り替わります。機能は失われず見た目の滑らかさだけがなくなる形なので、startViewTransition が使えるか確認してから呼ぶようにすれば、どのブラウザでも問題なく動作します。
遷移のアニメーションを変えるにはどうしますか？
View Transition は専用の擬似要素を生成するので、それに対して CSS で animation や transition を指定すると、フェードの速さや動き方を自由に調整できます。view-transition-name を付けた要素ごとに別の動きを与えることも可能です。