31 lines
773 B
TypeScript
31 lines
773 B
TypeScript
import { domAnimation, LazyMotion, useReducedMotion } from "motion/react";
|
|
import * as m from "motion/react-m";
|
|
import type { FC, PropsWithChildren } from "react";
|
|
import { useLocation } from "react-router";
|
|
|
|
const TRANSITION_DURATION_SECONDS = 0.2;
|
|
|
|
const RouteTransition: FC<PropsWithChildren> = (props) => {
|
|
const { children } = props;
|
|
const { pathname } = useLocation();
|
|
const reduceMotion = useReducedMotion();
|
|
|
|
return (
|
|
<LazyMotion features={domAnimation}>
|
|
<m.div
|
|
key={pathname}
|
|
initial={reduceMotion ? false : { opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{
|
|
duration: reduceMotion ? 0 : TRANSITION_DURATION_SECONDS,
|
|
ease: "easeOut",
|
|
}}
|
|
>
|
|
{children}
|
|
</m.div>
|
|
</LazyMotion>
|
|
);
|
|
};
|
|
|
|
export { RouteTransition };
|