Nextjs で view transition api を使ってページ遷移時にアニメーションを実装する
はじめに
Nextjs でページ遷移時にアニメーションを実装する方法を調べていたところ、view transition api という API があることを知りました。
Astro でも使えるようになったのを知っていたのですが、Nextjs でも使えるのか気になったので調べてみました。
知ってはいたけど
view transition api を使う例はたくさんあったのですが、直接 CSS を書いたり、使い方が難しかったり、ブラウザがサポートしていないなどの理由で使っていませんでした。
view transition api とは
view transition api はまだ実験的な機能です。
2024/04/30 時点では、Chrome と Edge でしかサポートされていません。
next view trantisionsが現れた！
next view trantisions を Github で見つけました。
使い方が、
- Nextjs の Layout コンポーネントにラップ
-
import { Link } from 'next-view-transitions'next-view-transitions由来のLinkコンポーネント使用
だけで実装できるので、簡単に使えそうです。
詳細：https://github.com/shuding/next-view-transitions?tab=readme-ov-file#usage
使ってみた
ニセモノのポ ◯ モンの画像を生成して、ページ遷移時にアニメーションを実装してみました。
サイトの大枠はv0で作りました。
動作動画
next-view-transitions なし
next-view-transitions あり
まとめ
とても簡単にポケ ◯ ン図鑑のリスト画面・詳細部分が作れました。
まだすべてのブラウザでサポートされていない点に注意です。
よい連休を。
参考
モンスター生成サイト：https://nokemon.eloie.tech/