Framer Motion 退出动画未使用到达路由器触发答案

【问题标题】：Framer Motion exit animation not firing with Reach RouterFramer Motion 退出动画未使用到达路由器触发
【发布时间】：2021-05-29 03:40:50
【问题描述】：

我创建了一个基本的 Gatsby 应用程序，该应用程序使用客户端专用路由和到达路由器。

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

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

以上内容保留了 Animate Presence 不被卸载，这允许进入和退出动画工作，但仅适用于静态页面且不使用到达路由器。

退出动画不适用于我的/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 路由器路由的页面时，它会在离开时显示进入动画但不显示退出。

有没有人遇到过这个问题和/或知道任何潜在的解决方法？这可能与到达路由器和位置有关吗？

感谢任何指导或帮助！

【问题讨论】：

标签： reactjs framer-motion reach-router

【解决方案1】：

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

【讨论】：