Angular 17 の View Transitions API 対応で遊んでみた
この記事は Angular Advent Calender 2023 の5日目の記事です。
前から View Transitions API が気になっていたのですが、先日リリースされた Angular 17 に実験的対応が入ったと聞いて、いい機会だと思って遊んでみたという話です。
View Transitions API について
View Transitions API は、画面遷移をなめらかにできる API です。Chrome では今年（2023年）の5月にリリースされたバージョン 111 から対応しています。Firefox や Safari は現時点で非対応です。
疑似要素や Promise など深い話もあるのですが、ざっくり説明すると、画面遷移前と遷移後で CSS プロパティ view-transition-name が同じ値を持った要素があれば、それらがなめらかにアニメーションするという API です。詳しくは MDN の ビュートランジション API を見てください。
Angular での対応については Introducing Angular v17 の下の方にちょこっと出てくる "Experimental view transitions support" で触れられています。
デモ
写真の一覧ページと詳細ページの間でアニメーションするシンプルなデモを作りました。
このように、一覧ページと詳細ページを行き来するときに、写真とフッターをいい感じにアニメーションさせることができます。
ソースコードは StackBlitz と GitHub に置いてあります。StackBlitz はここで見ると狭くて見づらいですが、左下の「Edit on ⚡StackBlitz」から見ると見やすいです。
Angular で View Transitions API を有効化する
Angular で View Transitions API を有効化する方法はとても簡単です。
冒頭で紹介した公式ブログにもある通り、 provideRouter に withViewTransitions() を追加するだけです。
export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes, withViewTransitions())],
};
これだけで、画面間の遷移でクロスフェードするようになります。これは View Transitions API のデフォルトの挙動です。
デモでは、よりなめらかに見せるために少し工夫をしています。それについて次の項目で説明します。
view-transition-name の付け方
最初に書いたとおり、画面遷移の前後の画面で CSS プロパティ view-transition-name の値が同じなら、アニメーションの対象となります。このデモでは一覧ページと詳細ページで次のように view-transition-name の値を設定しています。
footer
フッターにつけている view-transition-name: footer は、とてもシンプルなものです。これをつけることで、画面遷移したときにスッと移動してくれます。
photo-id-*
各写真の img 要素につけている view-transition-name: photo-id-* は、要素ごとに異なる値としています。なぜ異なる値にしているかというと、値が重複しているとブラウザで "Unexpected duplicate view-transition-name" というエラーが出てしまい、うまくアニメーションしてくれないためです。
それを回避するために、写真の ID を使って view-transition-name の値がユニークになるようにしています。ハマりがちなポイントなので注意しましょう。
うまく設定できると、画面遷移中に要素が移動するだけでなく、拡縮までしてくれます。
まとめ
Angular 17 で、とても簡単に View Transitions API で遊ぶことができました！うまく使ってユーザー体験を向上させたいなと思います。
明日は @kozy4324 さんです。よろしくお願いします！
Discussion