javascript - 更改路线时不执行 Framer Motion AnimatePresence
问题描述
我在使用 Framer Motion 库时遇到问题,尤其是 AnimatePresence 过渡。我可以让它在正常情况下工作,但是当我将我的 Routes 包装在自定义实现中时,我无法让退出动画工作。
当我导航到不同的路线时,我确认在组件上使用 useEffect 挂钩正在卸载,但退出动画不是由父级 AnimatePresence 触发的。
任何帮助将不胜感激。
这是我的代码:
应用程序.ts
const App = () => {
const auth: AuthContextState = useContext(AuthContext);
const db: FirestoreContextProps = useContext(FirestoreContext);
const components = {
home: HomeScreen,
classes: ClassScreen,
users: UserScreen,
login: LoginScreen
}
return (
<Background>
<Navbar/>
<Dashboard isLoggedIn={auth.data.authenticated}>
<AnimatedRoutes>
<RouteTransition path={`/home`} key={0}>
<HomeScreen key={0} />
</RouteTransition>
<RouteTransition path={`/classes`} key={1}>
<ClassScreen key={1} />
</RouteTransition>
<RouteTransition path={`/users`} key={2}>
<UserScreen key={2} />
</RouteTransition>
<RouteTransition path={'/login'} key={3}>
<LoginScreen key={3} />
</RouteTransition>
<RouteTransition exact path={'/'} key={4}>
<Redirect to={'/home'}/>
</RouteTransition>
</AnimatedRoutes>
</Dashboard>
</Background>
);
}
动画路线:
type Props = {
exitBeforeEnter?: boolean
initial?: boolean
}
export const AnimatedRoutes: FC<Props> = ({
children,
exitBeforeEnter = true,
initial = false,
}) => {
return (
<AnimatePresence exitBeforeEnter={exitBeforeEnter} initial={initial}>
<Switch>
{children}
</Switch>
</AnimatePresence>
)
}
type RouteProps = {
key: number
exact?: boolean
path: string
slide?: number
slideUp?: number
}
export const RouteTransition: FC<RouteProps> = ({
children,
key,
exact = false,
path,
slide= 0,
slideUp = 0,
...rest
}) => {
return (
<Route path={path} exact={exact} {...rest}>
<MountTransition key={key} >
{children}
</MountTransition>
</Route>
)
}
安装过渡:
type Props = {
key: number
slide?: number
slideUp?: number
}
const Container = styled(motion.div)`
display: flex;
height: 100%;
width: 100%;
`
export const MountTransition: FC<Props> = ({
children,
key,
slide = 0,
slideUp = 0,
}) => {
return (
<Container
key={key}
initial={{opacity: 0, x: slide, y: slideUp}}
animate={{opacity: 1, x: 0, y: 0}}
exit={{opacity: 0, x: slide, y: slideUp}}
transition={{type: 'tween', duration: 2, ease: 'easeInOut'}}
>
{children}
</Container>
)
}
解决方案
尝试这样的事情:
<Route
render={({location}) => {
return (
<AnimatePresence exitBeforeEnter>
<Switch location={location} key={location.key}>
<Route .../>
<Route .../>
<Route .../>
</Switch>
</AnimatePresence>
)
}}
/>
推荐阅读
- sip - Linphone SIP 客户端在 NAT 后不工作
- mongodb - 检索 Auto Scaling 组实例 ip 并将其提供给 ansible
- angular - 以 Angular 7 将二进制格式的文件发布到 POST 请求 URL
- python - Python:尝试迭代子进程输出时,迭代是按字符而不是按行
- java - 由于我的黑客等级解决方案超时而终止
- azure - 找出在 ADF v1 中部署 Azure 数据工厂管道的用户
- c# - 以编程方式将 FontStyle 设置为 Bold Italic
- android - 如何在edittext中允许mm/yyyy格式输入信用卡/借记卡详细信息
- go - 如何有效地对文件进行多次写入
- excel - 使用动态变量将范围作为字符串调用