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 以上 (
![Chrome 111 の View Transitions API でリッチなページ間トランジションを実現する](https://cdn-ak-scissors.b.st-hatena.com/image/square/84cd30e0d1b7921cb9103d02ae4eb894af1738ab/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--ZDwWHxOx--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AChrome%252520111%252520%2525E3%252581%2525AE%252520View%252520Transitions%252520API%252520%2525E3%252581%2525A7%2525E3%252583%2525AA%2525E3%252583%252583%2525E3%252583%252581%2525E3%252581%2525AA%2525E3%252583%25259A%2525E3%252583%2525BC%2525E3%252582%2525B8%2525E9%252596%252593%2525E3%252583%252588%2525E3%252583%2525A9%2525E3%252583%2525B3%2525E3%252582%2525B8%2525E3%252582%2525B7%2525E3%252583%2525A7%2525E3%252583%2525B3%2525E3%252582%252592%2525E5%2525AE%25259F%2525E7%25258F%2525BE%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AYuki%252520Hattori%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzBhMDAyODIwYmUuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)