シームレスな画面遷移が簡単にできるView Transitions API

カテゴリー: blog オン 2024年11月18日

通常、ページを遷移するときは画面の切り替わりがおこるため、 一瞬画面の切り替わりが生じます。

「View Transitions API」はページを遷移するときに、まるでスマホのアプリのようにシームレスに遷移してくれるCSSです。

これまでは、WebサイトではAJAXやJSフレームワークを使用したりと、簡単に実装できなかった表現方法ですが、View Transitions APIはシンプルなCSSだけで実現できてしまいます。

欠点は、ChromeとEdgeには対応していたもののSafariが対応していないことでした。これが、Safari バージョン18で対応となったため、ほぼ全ての人が「View Transitions API」によるシームレスな画面遷移が可能になったと言えます。
Safari バージョン18は2024年9月に出たばかりなので、クライアントワークで使うにはもう少し時間は必要ですが、バージョン18以下でもページは変わるのでサイト閲覧には問題ないありません。

https://hi-fn.com/test-code/View_Transitions_API_slide/index.html