View Transitions
Astro v3 がリリースされ、 astro:assets と astro:transitions が正式に実装された。
他にも Breaking Changes として個人的には @astro/image が削除されたり <Markdown /> コンポーネントが削除されたのが大きいだろうか。
先日の記事 を書いてから astro:assets は使ってみていたので移行作業は殆ど必要なかった。リソースを src/assets と src/content に仕舞ってしまえるのは、参照場所が分散してどこに置いてあるか訳が分からなくことが少なくなってとても良い。
逆に public 以下に配置してしまうと、 Astro のバンドラを通すことができないらしい。
https://docs.astro.build/en/guides/images/
本題。
私は割とノーマークだった View Transisions だが、大元は View Transitions API らしい。そもそも View Transitions API の存在を今さっき知った。悲しい。
View Transitions API は single-document 限定らしく、現状では Chrome と Edge でしか対応していない。
基本マルチページであり、クライアント側の js をぶん投げることでパフォーマンスで棲み分けをした Astro 君がわざわざ SPA mode とか言ってしまう新機能を試してみた。
ページ全体がアニメーションしてしまうが、実装は <ViewTransitions /> を head 内に配置しただけで終わる。
細かく動作を設定したい場合は Transition Directive を利用して定義していくらしい。そこまではやってない。
試してぱっと見た感じ、というか公式にも記載されている 通り、やっていることは古の pjax に近い。ソースをちゃんと読めば詳しく実装が分かるだろうが、そうでなくても DevTool のネットワークを眺めると非同期で遷移先の HTML を取得しているのが分かる。
現状で MPA での View Transitions API は実装されておらず（Chrome では設定をいじれば使えるが）、実際の動きを見てないのでなんとも言えないが、ネイティブの動きもこんな感じなんだろうか。
MDN を見る限り、css で動きを定義して js で event を管理しているように見えるので、（アニメーションの定義がしんどそうだが）概念的にもコード量的にも複雑ではないように見える。
とはいえ対応ブラウザが限られる現状では採用できる案件も限られ、特に (iOS) Safari がいつ対応するかで目にする機会が変わってくるんじゃないだろうか。
とりあえず見た目で分かりやすく変化する効果は特にクライアント受けが良いので、機会があればネイティブで触ってどこかに仕込みたい。