帧者运动退出动画不触发到达路由器

Question

我已经创建了一个基本的盖茨比应用程序，它是利用客户端专用路由与到达路由器。

我已经更新了我的gatsby-browser.js以反映以下内容:

export const wrapPageElement = ({ element }) => {
<AnimatePresence exitBeforeEnter>{element}</AnimatePresence>
}

上面保留了动画存在不被卸载，这允许进入和退出动画工作，但只适用于静态页面和不使用到达路由器。

退出动画不工作的任何非静态页面在我的/app目录，我相信这可能与我的路由器:

import { Router } from '@reach/router'
const App = () => {
return (
<Router basepath="/app" primary={true}>
<PageOne path="/one"/>
<PageTwo path="/two"/>
</Router>
)
}
export default App

只是为了上下文，帧运动动画如下:

<motion.div
variants={PAGE_TRANSITION_VARIANTS}
initial={"initial"}
animate={"animate"}
exit={"exit"}
transition={PAGE_TRANSITION}
>
<img src={icon} alt="Gatsby icon" />
</motion.div>

如前所述，这在静态页面上工作得很好，但在查看由Reach路由器路由的页面时，它显示进入动画而不是退出动画

当离开。有人遇到这个问题和/或知道任何潜在的修复方法吗?这可能与到达路由器和位置有关吗?

任何指导或帮助是感激的!

Answer 1

您是否尝试过为路由器组件添加唯一密钥?如果AnimatePresence有多个退出/进入组件，它需要能够通过它们的键唯一地标识每个组件。