Next.js + Framer Motion でページ遷移アニメーションを実装したいが、「exit」が走らない
記事のコンセプト
この記事は「Framer Motionでページ遷移のアニメーションを作りたいが、exitの処理が動かない！」とお困りの方に向けた記事です。
スタックオーバーフローでも同じ悩みの質問がありましたが、解決している記事は見かけませんでした。
同じ悩みを持った同士の手助けができるよう、備忘録として残します。
結論
NEXT以外のLinkコンポーネントを使っているから。
かもしれません。
開発環境
- Next.js
- TypeScript
- MUI
- Framer Motion
経緯
Next.jsでページ遷移時、フェードアウト→フェードインするアニメーションを「Framer Motion」で作りたいなーと思った。
そこでこちらの記事を参考にさせて頂きながら実装してみた。
// _app.tsx
import { AnimatePresence } from "framer-motion";
const MyApp = ({ Component, pageProps, router }: AppProps) => (
<AnimatePresence exitBeforeEnter>
<Component key={router.asPath} {...pageProps} />
</AnimatePresence>
);
export default MyApp;
// レイアウト用のファイル
export default function Layout(props: Props) {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Header />
// ヘッダー直下に配置
<motion.div
initial={{ opacity: 0, y: 10 }} // 初期状態
animate={{ opacity: 1, y: 0 }} // マウント時
exit={{ opacity: 0, y: 10 }} // アンマウント時
transition={{
duration: 0.5,
}}
>
<Container>
{props.children}
</Container>
</motion.div>
</ThemeProvider>
);
}
これでページ遷移するたびに、0.5秒掛けて下にフワッとフェードアウトして、フワッとフェードインするはず。
わくわく。
しかし、そこでハマった。
「exit」が動作しない。
ページ遷移した際「initial」「animate」は意図した通り作動し、下からフワッと表示される。
だが、「exit」のアニメーションが作動しているようには見えなかった。
つまり、パッと消えてフワッとなるのだ。
なんでだ。。
記述場所を変えてみたり、公式ページや英語の記事を読んだりしながらいろいろ試行錯誤。
そして約1時間後、何とか原因を突き止められた。
原因考察
私の場合
MUIのLinkコンポーネントを使っていたから。
でした。
- import { Link } from "@mui/material";
+ import Link from "next/link";
偶然、Next.jsのリンクコンポーネントで試してみたら、
思った通りのフワッと消えてフワッと現れるアニメーションが実現しました。
奇跡。
MUIのLinkコンポーネントはアイコンとか設定し易いという理由で使っていましたが、どうやら「Framer Motion」と相性が悪かったらしいです。
これがexitが走らない全ての原因なのかはわかりませんが、とにかく私のアニメーションは動きました。
あとがき
今後からはNext.jsのリンクコンポーネントを使っていくことにします。😅
また、他にも同じ名前のコンポーネントが他にもあった場合、Next.jsで提供されているものを優先して使って行こうと思います。
意図しない挙動をした時はぜひ、コンポーネントの提供元を変えることを試してみてください。
Discussion