View Transitions API がおもしろい

ページ遷移のときに背景の水玉がふわっと分裂して移動するアニメーション、実はほとんど CSS だけで実現しています。同じ view-transition-name を複数ページで揃えるだけで、ブラウザが勝手にいい感じの補間をしてくれるのが面白くて最近ずっと触っています。

仕組みは名前を揃えるだけ

遷移元と遷移先のページで同じ view-transition-name を持つ要素があると、ブラウザがその2つを「同じもの」とみなして、位置・サイズ・形を自動で補間してくれます。このサイトでは背景の水玉に bg-blob という名前を付けていて、トップページの大きな水玉がブログ一覧の隅へ滑っていくのはこれだけで動いています。

応用すると「分裂」も作れます。トップページには実は同じ位置に半透明の水玉が3枚重なっていて、それぞれ bg-blob、bg-blob-b、bg-blob-c という別の名前を持っています。遷移先で3つの名前がバラバラの場所にあると、重なっていた3枚がそれぞれの行き先へ飛んでいく=1つの水玉が3つに分裂して見える、という仕掛けです。

対応相手がいない要素の演出

名前のペアが片方のページにしかない場合、その要素は通常フェードで出入りするだけですが、::view-transition-old() や ::view-transition-new() に自前の keyframes を当てると自由に演出できます。ブログ詳細ページでは、一覧の水玉たちが右上の小さな雫に「吸い込まれる」動きをこれで作りました。

スキップされる罠

便利な一方で、ページをまたぐトランジションは意外と繊細です。リダイレクトを挟んだり、レンダーブロッキングな外部リソースで新しいページの描画が遅れたりすると、ブラウザは黙ってトランジションをスキップします。このサイトも最初は「たまに動かない」状態で、原因を突き止めるのにかなり苦労しました。

最終的には Astro の ClientRouter で SPA 的なナビゲーションに切り替えました。ページの取得と DOM の差し替えが終わってから document.startViewTransition が呼ばれるので、タイミング起因のスキップが構造的に起こらなくなります。クロスドキュメント方式で不安定に悩んでいる人には、この構成をおすすめします。

まとめ

宣言的に書けるページ遷移アニメーションとしてはいちばん手軽な選択肢だと思います。対応ブラウザはまだ限られますが、非対応でも普通に遷移するだけなので、装飾として気軽に足せるのがうれしいところです。名前を付けるだけで「同じものが移動した」と解釈してくれる仕組みは、発想次第で分裂・合体・吸収と何でも作れる遊び場でもあります。