【ビュートランジションズエーピーアイ】
View Transitions API とは？
最終更新:
💡 切り替え前後の表示を、アニメーションでつなぐ
DOM更新や対応するページ間の移動で、切り替え前後の表示を使ったアニメーションを作るブラウザーAPI。スナップショットをCSSでつなぎ、画面の変化を伝える。使える機能や遷移には対応条件がある。
📌 このページのポイント
- 切り替え前後の表示から、既定ではクロスフェードを作る
- 同一文書内のDOM更新と、対応する別文書への移動で使える
- 同じview-transition-nameで要素を対応付ける。各状態で名前は一意にする
- 別文書の遷移は同じオリジンと両ページの参加指定などが必要
ひよこ どうやって切り替えをなめらかにするの？
ペンギン先生 切り替え前の表示を取り、新しい状態を用意して、その間をアニメーションでつなぐよ。既定はクロスフェードで、要素の位置や大きさの変化も表せる。画面の変化を伝える演出で、データ取得自体を速くする仕組みではないんだ。
ひよこ SPAだけで使うの？
ペンギン先生 ひよこ 別ページへの移動では何を指定するの？
ペンギン先生 対応する遷移で、同じオリジンの両ページに@view-transition { navigation: auto; }を指定するよ。参加指定を片方だけにしても成立しないし、すべての移動が対象になるわけでもない。使うブラウザーと移動方法で確認しよう。
ひよこ 商品画像だけ動かせる？
ペンギン先生 切り替え前後の画像に同じview-transition-nameを付けると、対応する表示として扱えるよ。ただし、ひとつの状態で同じ名前を複数の表示要素に付けると遷移がスキップされる。商品一覧の全画像に同じ名前を付けないようにしよう。
ひよこ 未対応だったり遷移に失敗したりしたら？
もっと詳しく知りたい人へ
アニメーションを調整できる？
::view-transition-old()や::view-transition-new()などの擬似要素にCSSを指定して、時間や動きを調整できるよ。prefers-reduced-motionで利用者の設定を考慮し、動きを抑えたり省いたりする方法もある。通信の待ち時間が短くなる機能とは区別しよう。
📖 おまけ：英語の意味
「View Transitions API」 ＝ ビュー（画面）遷移API
💬 View（画面）のTransition（遷移・切り替わり）をスムーズにするAPIという意味だよ