【Chome126】View Transitions APIで滑らかな画面遷移を実装する

2024/06/15 6 users 画面遷移

こんにちは！ Chrome 111からView Transitions APIが利用可能になりましたが、今まで試す機会がありませんでした。 今回満を持して試してみたところ非常に面白かったので、この記事で共有したいと思います。 また、2024年6月11日にリリースされたChrome 126からView Transitions APIが強化されましたので、その点につい... 続きを読む

[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita

2024/06/09 30 users API View Transitions 画面遷移 MPA

2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように... 続きを読む

CSSアニメーションがView Transitions APIで進化する！ パネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなデモ -Rediento

2023/07/26 32 users API CSSアニメーション デモ 実装 パネル

パネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わる、View Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Gro... 続きを読む

View Transitions APIによるスムーズなページ遷移をNext.jsで簡単に試す

2023/04/16 20 users API View Transitions Next.js

はじめに こんにちは、ziと申します。 今回は、発表からしばらく経ってしまいましたが、View Transitions APIを使ったNext.jsでのスムーズなページ・UI遷移を目指して、実装してみます。 ※もし間違いやより良い実装方法など見つけましたら、ご指摘ください！ 🙇‍♂️ 今回実装した最終成果はこちらです。 また、コードはこち... 続きを読む