[React] FramerMotion 정리

※ motion css를 쉽게 넣기 위한 API 정리

설치 : npm install framer-motion@5
사용법)
     1. import { motion, AnimatePresence } from 'framer-motion';
     2. AnimatePresence 태그로 감싼다.
     3. 모션을 넣고 싶은 곳에 motion. 으로 넣는다.
     4. initial 속성은 시작할 때의 처음 CSS 설정을 한다. (모션시작) 
     5. animate 속성은 시작 때 부터 움직이는 것을 동작하게 한다. (모션완료)
     6. exit 속성은 animate에서 exit로 넘어가는 것을 의미 하여 동작이 끝날 떄 CSS를 지정 할 수있다. (사라지는 모션)
     7. X 가로축 , Y 세로축 , rotate 회전 , scale 확대 축소

※주의할 점 : AnimatePresence 사용 시 내부 컴포넌트에 연결되어 있는 ref 값을 제거

 

EX)

<AnimatePresence>
    {Open && (
        // 모션은 걸고 싶은 컴포넌트에 motion.지정 initial(모션시작), animate(모션완료), exit(사라지는 모션) 속성 지정
        //x(가로축), y(세로축), rotate(회전), scale(확대축소)
        <motion.aside
            className='modal'
            initial={{ opacity: 0, x: '100%' }}
            animate={{ opacity: 1, x: '0%', transition: { duration: 0.5 } }}
            exit={{ opacity: 0, scale: 0, transition: { duration: 0.5, delay: 0.5 } }}
        >
            <motion.div className='con' initial={{ opacity: 0 }} animate={{ opacity: 1, transition: { delay: 0.5 } }} exit={{ opacity: 0, transition: { delay: 0 } }}>
                {props.children}
            </motion.div>
            <motion.span
                className='close'
                onClick={() => setOpen(false)}
                initial={{ opacity: 0, y: 100 }}
                animate={{ opacity: 1, y: 0, transition: { duration: 0.5, delay: 0.5 } }}
                exit={{ opacity: 0, x: -100, transition: { duration: 0.5, delay: 0 } }}
            >
                close
            </motion.span>
        </motion.aside>
    )}
</AnimatePresence>