yuheijotaki.com

View Transitions API で画面遷移アニメーション

View Transitions API とは

  • 異なるDOM状態間のアニメーション遷移を簡単に実現できるAPI
  • これまでネイティブアプリでしか実装できなかったページをまたがるズムーズなアニメーション遷移も可能になる
  • Chrome、Edgeはバージョン111以降でサポートされているがSafari、Firefoxでは現状未サポート

デモ

  1. ひとつのHTMLファイル内の要素をアニメーションさせる
  2. 異なるHTMLファイルの遷移間をアニメーションさせる

のふたつが大きく分けて View Transitions API では実現できますが、今回は 2. の異なるHTMLファイル間のデモです。

ics-creative/230510_view_transitions_api を触りながら少し改変してみました。（ GitHub ）

Chromeで確認。URLが変更されブラウザバックでも動作しました。

作成の流れ

  • HTML
    • トップページ（ index.html ）、詳細ページ（ cat_*.html ）を作成。
    • 互いのページに同じ画像を使用するようにしておく。
  • JavaScript
    • こちらもChrome、Edgeのみサポートの Navigation API を使ってページ遷移を感知
    • ページ間のアニメーションをさせたい要素に対して style.viewTransitionName を設定
      • 今回は cat-anime
    • 遷移動線のパターンによって <html> にクラスを付与
      • 今回の例
        • トップページから詳細ページ（ from-index, to-detail ）
        • 詳細ページからトップページ（ from-detail, to-detail ）
        • 詳細ページから詳細ページ（ from-detail, to-detail ）
    • 遷移先のDOMを取得し更新
  • CSS
    • アニメーションさせる要素に対して view-transition-name: cat-anime; を指定
    • トップ、詳細で画像のサイズを指定
      • 画像の拡縮アニメーションは自動的に行われる
    • その他のDOMのアニメーションを設定
      • ::view-transition-old , ::view-transition-new 疑似要素に対して先ほどの遷移動線パターンで付与したクラスを使用
        • 今回の例
          • html.from-index.to-detail::view-transition-old(root) { ... }

（参考）Safariの場合

未サポートのブラウザでは遷移時のアニメーションは無くなりますが、遷移自体は可能です。

所感

  • 「簡単に実現できる」とは言ったものの、ブラウザAPIとしてサポートされてライブラリ等が必要ないだけで実装内容によっては簡単ではない
  • pjaxでは遷移時に更新する/しないDOMを指定したりしてたが、遷移動線のパターンを網羅しながらやるという所は考え方的には似てる気がした
  • 今回のデモの場合ページタイトルは遷移時に切り替わらないため、headの中身は自前で切り替えが必要そう
  • 「ひとつのHTMLファイル内の要素をアニメーションさせる」方法は、例えば画像ライトボックスが実装できるため全モダンブラウザでサポートしたら本格的に使うことになりそう

参考記事