View Transitions APIとは？ページ遷移をなめらかにつなぐ
SPA でも MPA でも使える
ページ遷移時のちらつきのないスムーズなアニメーションを実装するには、複雑なJavaScriptとCSSの組み合わせが必要でした。View Transitions APIはdocument.startViewTransition()の呼び出しや、MPAでは@view-transitionルールでブラウザが自動的に遷移アニメーションを処理します。
view-transition-nameで特定の要素を追跡すれば、ページ間移動時に要素がスムーズに位置とサイズを変更する共有要素遷移も実装できます。
適用方法
1
SPAではdocument.startViewTransition(() => updateDOM())を呼び出す
2
MPAではmetaタグで@view-transitionを有効化する
3
共有要素にview-transition-nameを付与する
4
::view-transition擬似要素で遷移アニメーションをカスタマイズする
メリット
- ✓ 既存アプリに最小限のコードでページ遷移効果を追加できる
- ✓ SPAとMPAの両方をサポートしどんなアーキテクチャでも使用可能
デメリット
- ✗ Safariのサポートがまだ完全ではない
- ✗ 複雑な共有要素遷移はレイアウト計算コストが高い場合がある
ユースケース
EC商品一覧から詳細ページへのスムーズな遷移
ダークモード/ライトモード切替時のスムーズな色変換