您正试图在 AnimatePresence 中为多个子项设置动画，但其 exitBeforeEnter 属性设置为 true

Question

浏览器控制台出错

You're attempting to animate multiple children within AnimatePresence,
but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.

App.js（包含在 BrowserRouter 中）

<Switch>
       <AnimatePresence exitBeforeEnter>
          <Route key="1"  exact path="/" component={Home}/>
          <Route key="2"  exact path="/home" component={Home}/>
          <Route key="3"  exact path="/articles" component={Articles}/>
       </AnimatePresence>
 </Switch>

主页.js/Articles.js

const Home = props =>{
  return(
    <motion.h1 initial={{x:-100}} animate={{x:0}} exit={{x:-100}}>Home/Articles</motion.h1>
  )
}

export default Articles

任何人都可以解释导致错误的原因吗？

Answer 1

正如文档所说 exitBeforeEnter:

If set to true, AnimatePresence will only render one component at a time. The exiting component will finished its exit animation before the entering component is rendered.

因此，启用此道具后，您需要另一种方式，将 Switch 换成 AnimatePresence

<AnimatePresence exitBeforeEnter>
  <Switch location={location} key={location.pathname}>
    <Route exact path="/" component={Home}/>
    <Route exact path="/home" component={Home}/>
    <Route exact path="/articles" component={Articles}/>
  </Switch>
</AnimatePresence>

请注意，您还需要为 Switch

传递 key