View Transitions API
変更の前後でページを撮影し、その間のアニメーションを自動で作ってくれるブラウザ API。実際のページ読み込みをまたいでも使える。
document.startViewTransition(callback) を呼ぶと、現在の見た目をスナップショットし、DOM の更新を実行し、再度スナップショットを取ってクロスフェードする。より凝った表現には、対応づけたい要素に view-transition-name を指定する。たとえば一覧のサムネイルと詳細画面の同じ画像を結べば、ブラウザが位置の間を滑らかに変形させる。アニメーションは ::view-transition-old や ::view-transition-new などの疑似要素を使い、普通の CSS で制御できる。本当に面白いのは、CSS の at-rule で有効にするドキュメント間版である。マルチページのサイトでも滑らかな遷移が得られ、これはすべてを SPA で作る最大の理由の一つだった。