2024年5月9日（木）

AstroのView Transitionsを試してみる

はじめに

<ViewTransitions /> をインポートして <head> 内へ追加。
デフォルトはこれのみだが、個別に指定する場合はディレクティブを使っていく。

ページ内でユニークな名前を付与することで前後ページでの置き換え要素を特定する。（前後ページのHTMLで共通の名前を与える）

<img transition:name="image01" />

投稿などの動的要素はindexやslugをを使ってユニークにする。
例えば記事ページ下部に表示する「最新の投稿」などは自身を外す等、何かしら工夫が必要。

'fade', 'initial', 'slide', 'none' が指定可能。
アニメーションのカスタマイズも可能。

ページ間でコンポーネントとHTML要素を保持するために指定する。

<video autoplay transition:persist></video>

この場合ナビゲーションが発生しても video は再生が継続される。

現状でChromiumでサポートのためあまり現実的ではないと思いつつ、フォールバックはきちんと整備されている印象。
- 例えばSafariやFireFoxでもアニメーションがそれっぽくなったり、videoの再生がナビゲーションが発生した時点から継続される。
headの書き換えなど動き以外のところはよい感じに行ってくれてよい。
ページまたがる状態やscriptの制御は astro:after-swap イベントを使用する。
- swupでも同じようなことがあり、スムーズ画面遷移系はやることが似ている
なんでもかんでもView Transitions APIでアニメーションができるわけではない。
- 例えばテキストが小さいサイズから大きいサイズへ変更される場合は荒ぶってしまった。（指定の問題？）
Astroの組み込み機能が分かっていないのか、View Transitions APIそのものが分かっていないのか分からなくなる。