javascript - 带有 framer-motion 的 Next.JS 不会更改导航内容

Question

我的索引页面上有以下链接，该链接链接到我的About Us页面：

<Link href="/about"><a>About us</a></Link>

在我的_app.js文件中，我有这个AnimatePresence包装器：

<AnimatePresence exitBeforeEnter>
    <Component {...pageProps} key={router.route} />
</AnimatePresence>

现在，当我点击我的About Us链接时，浏览器 URL 栏显示新路由，但页面内容仍然是索引内容。

但是，当我移除AnimatePresence包装器时，它工作正常（当然没有动画）。

为什么我的动画不起作用？

score 4 · Accepted Answer

啊问题是我需要用一个运动包装器来包装我的组件，比如：

<motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
            >

1 回答 1