CSSのみでMPAでもSPAっぽく画面遷移できる View Transitions API

投稿日:
2024/06/12
更新日:
2024/06/12
読了時間:
4分程度

Chrome126からView Transitions APIがMPAにも対応

View Transitions API自体はChrome111から実装された機能ですが、リリース当時はJavascriptと組み合わせての実装が必須であったりSPAでのみの動作する仕様であった為、当サイトは元々Barba.jsでSPAを実現させていたので静観していたのですが、Chrome（Edge）126からはMPAで尚且つCSSのみで実装が可能となったようですので、挙動確認かねてサンプルを用意してみました。

CSSでの実装要点

1.View Transitions APIを有効化

@view-transition {
  navigation: auto;
}

2.ページごとにアニメーションさせたい要素同士を紐づける

@view-transition {
  navigation: auto;
}
/* 遷移する前・後共通のアニメーションさせたい要素 */
#hoge {
  /* ここで定義したview-transition-nameの名前同士がアニメーションされる */
  view-transition-name: fuga;
}

一覧から詳細への画面遷移作例

実際の挙動の確認は、こちらから別ウインドウでご確認いただけます。
※Chrome126以上の環境でご確認ください

実装して感じたポイント

拍子抜けするぐらいにかなり簡単に実装できます。
但し、MPAですので実際にページ遷移してからDOMを取得し画像やCSSでレイアウトを構築させながらアニメーションされる感じになるため、SPAに比べるとちらつきが出るケースがありますので、画像のアスペクト比率を定義したり、::view-transition-old()、::view-transition-new()などを利用してフェードイン・アウトの時間を調整するなどのケアが必要になるかと思います。
とはいえSafariやFirefoxでは記事投稿時点では未対応であるため、view-transitionが利用できなくても問題ないように@supportなどで振り分けしたほうが良いかもしれない。