View Transitions APIとは何ですか？

ページ遷移やDOM更新時に、スムーズなアニメーション付きの画面切り替え効果を実装できるブラウザAPI。SPAでもMPAでもネイティブアプリのような遷移体験を実現できる。

View Transitions APIのポイントは？

ページ遷移やDOMの変更時にクロスフェードなどのアニメーション効果を自動で適用できる。SPAのクライアントサイド遷移だけでなく、MPAのページ間遷移にも対応。view-transition-nameで特定要素を指定すれば、要素が移動するようなモーフィングアニメーションも実現可能

【ビュートランジションズエーピーアイ】

View Transitions API とは？

💡 ページ切り替えをネイティブアプリ級になめらかにする、画面遷移の魔法

📌 このページのポイント

ページ遷移やDOMの変更時にクロスフェードなどのアニメーション効果を自動で適用できる
SPAのクライアントサイド遷移だけでなく、MPAのページ間遷移にも対応
view-transition-nameで特定要素を指定すれば、要素が移動するようなモーフィングアニメーションも実現可能

View Transitions APIのイメージ

ひよこ

ページ移動するときにパッと切り替わるのが普通だけど、それをなめらかにできるってこと？

ペンギン先生

そのとおり。View Transitions APIを使うと、古い画面のスナップショットを撮って、新しい画面にクロスフェードするようなアニメーションを自動でやってくれるんだ。ネイティブアプリみたいな体験がWebでも実現できるよ

ひよこ

SPAじゃないと使えないの？

ペンギン先生

最初はSPA向けのdocument.startViewTransition()だけだったけど、今はMPA（通常のページ遷移）でも使えるようになったよ。CSSの@view-transitionルールを指定するだけで、サーバーサイドレンダリングのサイトでもページ間のなめらかな遷移が実現できるんだ

ひよこ

特定の要素だけアニメーションさせることもできるの？

ペンギン先生

view-transition-nameというCSS プロパティで要素に名前をつけると、遷移前後で同じ名前の要素が自動的にマッチングされて、移動やリサイズのアニメーションが適用されるよ。商品一覧から詳細ページに遷移するとき、商品画像が飛んでいくような演出ができるんだ

ひよこ

アニメーションのカスタマイズはどうやるの？

ペンギン先生

::view-transition-old()や::view-transition-new()といった擬似要素にCSSアニメーションを適用するだけでカスタマイズできるよ。フェード・スライド・ズームなど自由自在だね。AstroやNext.jsなどのフレームワークも対応を進めていて、導入のハードルはどんどん下がっているよ

まとめ：ざっくりこれだけ覚えればOK！

「View Transitions API」って出てきたら「ページ遷移をなめらかにアニメーションさせるAPI」と思えればだいたいOK！

📖 おまけ：英語の意味

「View Transitions API」＝ビュー（画面）遷移API

💬 View（画面）のTransition（遷移・切り替わり）をスムーズにするAPIという意味だよ

← 用語集にもどる