[英]React Router and framer motion Animate Presence
当我将“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>
来自exitBeforeEnter文档
如果设置为
true
,AnimatePresence
将一次只渲染一个组件。 退出组件将在渲染进入组件之前完成其退出动画。
您必须为在AnimatePresence
中使用的所有组件指定exit
动画。 在路由更改时, AnimatePresence
将首先执行exit
动画,然后才渲染下一个组件。 如果组件没有exit
动画并且它是AnimatePresence
子AnimatePresence
,则路由更改只会更改 url 而不是视图。
如果您不向每条路线添加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>
}
主页.jsx
const exit = {
exit: {
opacity: 0,
},
}
export default function Home() {
return <motion.h1 {...exit}>Hello</h1>
}
对于那些仍然迷路的人,您需要使用其他答案中提到的“退出”参数将 <motion.div> 标签包裹在 < redirect > 标签周围。 下面提供了示例代码。
return (
<motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show' className='login-container'>
<Redirect to='/Dashboard' />
</motion.div>
);
有没有人有 react-router-dom v6 的更新?
我正在重写我几个月前制作的一个小应用程序,它在使用AnimatePresence
和Switch
Router 组件之前运行良好。 退出转换在页面更改之间成功运行。
现在出于某种原因,退出转换不会在页面更改时触发,我怀疑这可能是因为对 react-router-dom API 和组件使用所做的更改。
在 react-router-dom v6 中,它看起来更像:
const App = function () {
return (
<AnimatePresence exitBeforeEnter>
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route
path="characters"
element={<Characters />}
/>
</Route>
<Route path="login" element={<Login />} />
</Routes>
</BrowserRouter>
</AnimatePresence>
);
};
和Layout
组件:
<motion.div
key="layout"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.7 }}
>
<Menu />
<div>
<Outlet />
</div>
</motion.div>
不幸的是,退出转换不会触发。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.