이런 생각을 하기 귀찮거나 나의 CSS 스킬이 갓 태어난 밤비 다리처럼 흔들흔들하다면
라이브러리 설치 후 사용도 좋은 방법입니다.
react-transition-group 이라는 라이브러리를 설치하시면 간단한 애니메이션 부여하기 쉽습니다.
쉬운건 아니고 패턴만 아시면 됩니다.
- 음지의 1타강사 코딩애플님(사랑해요)
코딩애플님의 명언을 떠올리며 갓 태어난 밤비처럼 흔들리는 다리를 붙들고 react-transition-group으로 라우터 전환 애니메이션을 구현하려고 했다.
근데 안 된다. 왜 안되지? 어제 하루를 온전히 react-transition-group 사용법 연구에 바쳤는데 결국 실패했다.
지연시간을 주는 것까지는 되는데 이상하게 css transition이 적용이 안되고 뻣뻣하게 넘어간다.
외국 형님들이 올려주신 코드펜 보고 그대로 따라치기도 했는데 안된다.
언젠가 다시 한 번 연구해봐야겠지만 여기에 더 시간을 투자하고 싶지 않아서 다른 라이브러리를 찾는 것으로 방향을 틀었다.
그렇게 찾아낸 framer motion. 엄청 간단하고 transition group보다 훨씬 쉽다. css 파일도 필요 없음.
이거 구현하는데 뭐하러 라이브러리를 쓰나요? 라우터도 필요 없을 것 같은데?? 그냥 css로 다 가능한 부분 아닌가요??? 애초에 리액트도 필요 없고 JS로 만드는 게 낫지 않나요????
네 맞습니다. 다만 라우터나 기타 기능들을 연습하기 위해 굳이굳이 라우터로 나눠서 만들고 있을 뿐입니다. 아무튼 나중에 다른 곳에 쓸 수 있잖아요. 하하.
1. 일단 framer-motion을 설치한다. npm이면 npm install하면 되겠죠.
yarn add framer-motion
2. AnimatePresence를 import한 뒤 애니메이션을 적용할 라우트를 감싸준다.
import { Route, Routes, useLocation } from "react-router-dom";
import { AnimatePresence } from "framer-motion";
function App() {
const location = useLocation();
return (
<div className="App">
<AnimatePresence>
<Routes location={location} key={location.pathname}>
<Route path="/" exact element={<LoginPage />} />
<Route path="/main" element={<MainPage />} />
</Routes>
</AnimatePresence>
</div>
);
}
3. 애니메이션을 적용할 컴포넌트에 motion을 import해주고 html을 감싸고 있는 태그에 motion만 붙여주면 끝.
intial, animate, exit로 각각 마운트될 때, 마운트가 완료되었을 때, 언마운트될 때의 형태를 설정할 수 있다.
참고로 이걸 이용해서 캐러셀 같은 효과도 줄 수 있고 뭐 회전이고 어쩌고 다 된다. 그냥 응용만 하면 뭐든 되는 듯하니 필요할 때 다시 찾아봐야겠다.
import { motion } from "framer-motion";
function Login(props) {
return (
<motion.div
className="loginPage"
intial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<form className="loginPage__form" onSubmit={loginSubmitHandler}>
<p>Hello, What is your name?</p>
<input className="loginPage__input" />
</form>
</motion.div>
);
}
사랑해요 framer motion
사랑해요 연예가중계
