はい、どうも。
今回はView Transitions API（ビュー遷移 API）を試してみましょう。
View Transitions APIが登場してからそこそこ経ちますが、普段仕事で使うことがないものなので、ノータッチでした。
調査がてら試してみようという感じです。
View Transitions APIとは？
View Transitions APIは、ウェブページの状態変化・・・DOMの更新のことですね・・・をスムーズにアニメーションさせるためのAPIです。
ブラウザネイティブの機能のため、今までJavascriptやCSSで頑張っていたものを簡単に実装できます。
これにより、ネイティブアプリのようなスムーズな画面遷移をWebサイトで実現できるようになります。
ブラウザサポート状況
Firefoxはサポートされていないので、その点だけ注意が必要です。
詳しくは以下のページを見てください。
SPAでもMPAでも使うことができるので、それぞれ見ていきましょう。
View Transitions APIの使い方
SPAでの使い方
まずはSPA（シングルページアプリケーション）での使い方です。
手順
- Javascriptで
document.startViewTransition関数を設定 - CSSで対象となるDOMに
view-transition-nameを設定
document.startViewTransition()という関数は、DOM更新が行われる前に呼び出されます。
そして、更新後のDOMの状態に沿ってトランジションを実行する形ですね。
具体的なコードは以下です。
1. Javascriptで document.startViewTransition 関数を設定
// View Transitions APIがブラウザでサポートされているかチェック
if (!document.startViewTransition) {
// フォールバック処理
updateView();
return;
}
// View Transitionを開始
const transition = document.startViewTransition(() => {
// この中でDOMを更新
updateView();
});
try {
await transition.finished;
// 遷移完了後に処理を書きたい場合は以下に書く
console.log('遷移完了');
} catch (error) {
console.error('遷移エラー:', error);
}
// この中にDOM更新処理を書く
function updateView() {
}
2. CSSで対象となるDOMに `view-transition-name` を設定する
// 遷移元のDOMに設定
.card-image {
view-transition-name: sample;
}
// 遷移先のDOMに設定
.card-expand-image {
view-transition-name: sample;
}
document.startViewTransition()関数で処理を定義しつつ、view-transition-nameで遷移元と遷移先の要素を紐付けるイメージです。
お手軽！！！
さてさて、それでは実例を見てもらいましょう。
※自作の簡単なSPAとなっていて、フレームワーク等は使っていません。
※Reactなどで使う場合は一工夫必要そうなのでご注意を。
カードの画像と説明部分にview-transition-nameを設定して、あとはブラウザ側でよしなにアニメーションを伴う遷移をしてくれています。
実際の表示の確認は以下が見やすいですよ。
注意が必要なのは、view-transition-nameの値はページで一意のものとなる点です。
異なるページで要素を紐づけるのでそりゃそうなんですけど、SPAだとハマりやすい部分なので注意しましょう。
NuxtやNextでも使えるようになっているみたいなので、使いたい場合は以下を参考にして見てください。
- Nuxt:View Transitions API (experimental)
- Next:viewTransition ※実験的な機能のようです（2025年9月3日現在）
MPAでの使い方
次はMPA（マルチページアプリケーション）での使い方です。
MPAでも簡単に導入できますよ。
手順
- 導入したいページにmetaタグを設置（遷移元、遷移先どちらにも必要）
- CSSでView Transitionsの基本設定を行う
- CSSでView Transitionsのカスタム設定を行う
- 要素毎にCSSを設定
具体的なコードは以下です。
1. 導入したいページにmetaタグを設置（遷移元、遷移先どちらにも必要）
遷移元にも遷移先のページにも必要です。
サイト全体で導入したい場合は、全ページに設置しましょう。
<meta name="view-transition" content="same-origin">
2. CSSでView Transitionsの基本設定を行う
以下のコードをCSSに設置しましょう。
/* View Transition の基本設定 */
@view-transition {
navigation: auto;
}
3. CSSでView Transitionsのカスタム設定を行う
::view-transition-old と ::view-transition-new(root) を使用して、transitionの設定を行います。
rootは特別なグループで、ページ全体の遷移で適用される形となります。
以下のコードだと、遷移する際（old）にフェードアウト＆スケールアウトし、遷移した際（new）にフェードイン＆スケールインする形になります。
/* View Transition のカスタム設定 */
::view-transition-old(root) {
animation: fade-and-scale-out 0.4s ease-in-out;
}
::view-transition-new(root) {
animation: fade-and-scale-in 0.4s ease-in-out;
}
/* アニメーション設定 */
@keyframes fade-and-scale-out {
to {
opacity: 0;
transform: scale(0.95);
}
}
@keyframes fade-and-scale-in {
from {
opacity: 0;
transform: scale(0.95);
}
}
4. 要素毎にCSSを設定
遷移元のページと遷移先のページで、紐づけたい要素にCSSで view-transition-name を設定します。
1ページ内でview-transition-nameの値は一意のものにする必要があるため、商品一覧→詳細ページのように複数紐付ける必要がある場合は、Javascrpitで動的にview-transition-nameを設定する必要があります。
遷移元のCSS
.product-name-1 {
view-transition-name: product-title-1;
}
遷移先のCSS
.product-detail-name-1 {
view-transition-name: product-title-1;
}
view-transition-name毎に ::view-transition-old・::view-transition-newを使って個別のアニメーション設定も可能です。
/* View Transitions のカスタム設定 */
::view-transition-old(product-title-1) {
animation: scale-out 0.4s ease-in-out;
}
::view-transition-new(product-title-1) {
animation: scale-in 0.4s ease-in-out;
}
/* アニメーション設定 */
@keyframes scale-out {
to {
transform: scale(0.5);
}
}
@keyframes scale-in {
from {
transform: scale(0.5);
}
}
さて、こちらも実例を見てもらいましょう・・・と言いたいところなのですが、codepenだと展開されるHTMLがiframeとなり、ページ遷移での処理が上手くいかないため、実際のページ遷移は以下のGIFで確認してください。
（うまいやりかたあれば教えてくださ〜い・・・）
このような動きがブラウザネイティブなページ遷移で実現できるというのが夢がありますね。
codepenでのコードも以下に貼っておきますね。
Export等してローカルに保存後、リンクのパスを書き換えれば実際の動きが確認できますよ。
まとめ
というわけで、今回はView Transitions APIについて調査＆まとめを行いました。
ただ、実は個人的にはページ遷移のアニメーションはあまり好きではなく、パッと切り替わって欲しい派だったりします。
ブランディング重視のサイトだったり、ネイティブアプリのようなちょっとリッチなページ遷移をさせたい、みたいな要件の際にはアリだなーと思います。
実装自体もサクッと簡単なのが良いですね。
それではまた。
Discussion