해결된 질문
24.07.19 17:37 작성
·
142
·
수정됨
1
안녕하세요!
클론하다가 React에서 Framer로 레이아웃을 이전 이후로 나누어서 페이지 전환을 스무스하게 animation을 줬던 기억이 있어서 반영해봤는데요.
위의 페이지 전환 효과를 next 프로젝트에도 반영해보려고 하는데
App Router의 특성? 때문인지 {children} 으로 라우팅을 전달 받기 때문에 이전, 이후가 아닌 공통적인 레이아웃으로 취급되고 명확한 구분(id)가 없기 때문에 부드러운 전환이 잘 안되는 걸까요..
유추한 내용이 맞을까요..?
타 라이브러리 질문 안받으신다면 죄송함다 ㅠ
const Framer = ({ children }: { children: ReactNode }) => {
const pathName = usePathname();
return (
<>
<AnimatePresence mode="wait" initial={false}>
<motion.div
key={pathName}
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
transition={{ duration: 0.5 }}
>
{children}
</motion.div>{" "}
</AnimatePresence>
</>
);
};
답변 1
1
2024. 07. 19. 17:58
저는 framer를 쓰지는 않지만 이거 1년 전부터 있었던 유명한 이슈입니다. 아직도 안 고쳐진 모양입니다. ㅠㅠ
https://github.com/vercel/next.js/issues/49279
2024. 07. 19. 18:01
아 감사합니다!!