§16-03Motion
View Transitions API
ページや状態の切り替えを滑らかなアニメで繋ぐ。
一覧から詳細への移動で要素の連続性が伝わり、どこへ移ったかを追いやすい。カードや画像をクリックして開く流れに向く。
実装のポイント
document.startViewTransition で DOM 更新を包み、::view-transition-old/new を CSS で装飾する。非対応時は更新だけ実行する。
- 特徴
- アニメーション
- ブラウザ API
- デモで使っているもの
- lucide-react
- matchMedia
- View Transitions API