Chrome 111 の View Transitions API でリッチなページ間トランジションを実現する

Chrome 111 は CSS の色関数 や 三角関数の追加 など、目を引く更新が多いですが、中でも View Transitions API は、Web アプリの UX 向上という観点で、高いポテンシャルを秘めた API です。 この記事では、この View Transitions API について、実装例・実用例を交えて概説します。 View Transitions API とは View Transitions API は、『画面の更新前後の異なる DOM 要素間のトランジションを、簡素な記述で実現』 する API です。 サポートブラウザ 2024/06/12 時点: Chrome: ✅ 111 以上 (https://developer.chrome.com/en/blog/new-in-chrome-111/) Edge: ✅ 111 以上 Safari: ⏳ 18 以上 (

[Pasta-K]

便利そうだけど、これで誤魔化して実際のDOM構築パフォーマンスはイマイチになるみたいなの頻発しそうだなというのが気になる

[hush_in]

便利そう。画像の拡縮やろうとすると小さい表示のときにも高解像度の画像を取っておいたほうが良さそうに思えた

[tkawa]

RailsのTurboに入れるのはすぐできそう

[Nyoho]

View Transitions APIおもしろ

[sytkm]

MacのKeynoteで同じようなのができてすごいと思った記憶。Webでもできるのかあ。ただ、ある程度のブラウザで使えるようにならないと厳しそうだなあ。

[pmint]

広まらなかった独自仕様"Portals"みたいなやつをまたやろうとしてるのか https://web.dev/hands-on-portals