我在使用 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>
)
}