まえがき React のアニメーションライブラリである Framer Motion を利用してページ遷移アニメーションを実装した際に、いくつか引っかかった点があったので、備忘録として残しておこうと思います。 バージョン Next.js v12.1.1 Framer Motion v7.6.1 今回実装するもの ↑ こんな感じのふんわりしたフェードイン / フェードアウトを実装します。 手順 1. アンマウント時のアニメーションを有効にする import { AnimatePresence } from 'framer-motion' import type { AppProps } from 'next/app' import 'styles/globals.css' const MyApp = ({ Component, pageProps, router }: AppProps) =>
![Next.js + Framer Motion でページ遷移アニメーションを実装する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/86c4a0db9b9de0b0e80574f82233b1f9c96a1d2a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9TmV4dC5qcyUyMCUyQiUyMEZyYW1lciUyME1vdGlvbiUyMCVFMyU4MSVBNyVFMyU4MyU5QSVFMyU4MyVCQyVFMyU4MiVCOCVFOSU4MSVCNyVFNyVBNyVCQiVFMyU4MiVBMiVFMyU4MyU4QiVFMyU4MyVBMSVFMyU4MyVCQyVFMyU4MiVCNyVFMyU4MyVBNyVFMyU4MyVCMyVFMyU4MiU5MiVFNSVBRSU5RiVFOCVBMyU4NSVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjJhMTkwY2RjZDU1ZGM0YmRmNDgzNDQwNTljM2Q4YmM%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhcnJvdzJuZCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjEwZDQ1ZGY3YmZhNDU0MjMxZDljYzZiZTJmYTFmNzk%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D59c133988e60fef269f17d9e050b350a)