reactjs - Framer Motion 退出动画未使用 Reach Router 触发

Question

我已经创建了一个基本的 Gatsby 应用程序，它使用 Reach Router 的 Client-Only Routes。

我更新了我的 gatsby-browser.js 以反射(reflect)以下内容:

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

上面的代码防止 Animate Presence 被卸载，这允许进入和退出动画工作，但只适用于静态页面和不使用 reach router 的页面。

退出动画不适用于我的 /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

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