31 lines
744 B
TypeScript
31 lines
744 B
TypeScript
import { Outlet, useRouter } from '@tanstack/react-router';
|
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
|
|
const AnimatedOutlet = () => {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<AnimatePresence mode="wait">
|
|
<motion.div
|
|
key={router.state.location.pathname}
|
|
initial={{ x: '100%', opacity: 0 }}
|
|
animate={{ x: 0, opacity: 1 }}
|
|
exit={{ x: '-100%', opacity: 0 }}
|
|
transition={{
|
|
type: 'tween',
|
|
duration: 0.3,
|
|
ease: 'easeInOut'
|
|
}}
|
|
style={{
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%'
|
|
}}
|
|
>
|
|
<Outlet />
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
);
|
|
}
|
|
|
|
export default AnimatedOutlet; |