反应路由器和成帧器运动动画的存在

问题描述

当我将“ exitBeforeEnter”道具添加到带有嵌套路线的Animate Presence组件时，这些路线根本没有渲染，但是当我刷新它们渲染的页面时，删除该道具或直接转到该组件将对其进行修复，但是我需要使用react-router中的prop和重定向组件

这是我的代码：

<AnimatePresence exitBeforeEnter>
                <Switch location={this.props.location} key={this.props.location.pathname} >
                    <Route exact path='/home' component={() => <.../>

                    <Route path='/home/:alpha3Code' component={({match}) =>
                        .... />

                    <Redirect to='/home' />
                </Switch>
</AnimatePresence>

解决方法

如果您不向每条路线添加 exit 动画，那是正常的。

AnimatePresense 的主要路径

<AnimatePresence exitBeforeEnter>
  <Switch location={window.location} key={window.location.pathname}>
    <Route exact path='/' component={Home} />
    <Route exact path='/about' component={About} />
    <Route path="*">Page not found</Route>
  </Switch>
</AnimatePresence

关于.jsx

const exit = {
  exit: {
   opacity: 0,},}
export default function About() {
  return <motion.h1 {...exit}>Hello</h1>
}

Home.jsx

const exit = {
  exit: {
   opacity: 0,}
export default function Home() {
  return <motion.h1 {...exit}>Hello</h1>
}

来自exitBeforeEnter文档

如果设置为true，则AnimatePresence一次只能渲染一个组件。退出组件将在渲染进入组件之前完成退出动画。

您必须为exit内部使用的所有组件指定AnimatePresence动画。更改路线时，AnimatePresence将首先执行exit动画，然后仅渲染下一个组件。如果某个组件没有exit动画，但它是AnimatePresence的子代，则更改路线只会更改url，而不会更改视图。

对于那些仍然迷路的人，您需要使用其他答案中提到的“退出”参数将标签包裹在标签周围。下面提供了示例代码。


return (
            <motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show' className='login-container'>
                <Redirect to='/Dashboard' />
            </motion.div>
        );

framer-motion javascript reactjs reactjs