IT/React
[React] framer-motion을 이용한 간단한 아코디언 만들기
시린스
2024. 2. 19. 14:52
반응형
framer-motion이라는 라이브러리를 이용하여 간단한 애니메이션을 구현 할 수 있다.
아래는 framer-motion을 설치하는 방법의 관련된 URL 입니다.
https://www.npmjs.com/package/framer-motion
framer-motion
A simple and powerful JavaScript animation library. Latest version: 11.0.5, last published: 7 days ago. Start using framer-motion in your project by running `npm i framer-motion`. There are 3777 other projects in the npm registry using framer-motion.
www.npmjs.com
framer-motion을 사용하면 초기시점 , 애니메이션 , 끝났을 때(사라질 때)를 선택하여 애니메이션을 만들 수 있습니다.
아래와 같이 지정하면 아코디언을 만들 수 있습니다.
주의 사항
꼭 변동이 되는 부분의 <AnimatePresence>로 감싸주어야지만 사라질 때 (exit) 동작 기능이 됩니다.