Animate Presence

• 리액트 앱에서 사라지는 컴포넌트를 애니메이트 해주는 컴포넌트입니다.

Animate Presence 규칙

• visible 상태여야 합니다.
• 내부에는 condition 이 있어야합니다.

Animate Presence Props

• initial, animate, exit
  • exit : 해당 요소가 사라질 때 어떤 animation 을 발생시킬 지 정하는 것 입니다.

Animate Presence 예시

const boxVariants = {
  initial: { opacity: 0, scale: 0 },
  visible: { opacity: 1, scale: 1, rotateZ: 360 },
  leaving: { opacity: 0, scale: 0, y: 50 },
};

function App() {
  const [showing, setShowing] = useState(false);
  const toggleShowing = () => setShowing((prev) => !prev);
  return (
    <Wrapper>
      <button onClick={toggleShowing}>Click</button>
      <AnimatePresence>
        {showing ? (
          <Box
            variants={boxVariants}
            initial="initial"
            animate="visible"
            exit="leaving"
          />
        ) : null}
      </AnimatePresence>
    </Wrapper>
  );
}

참조

Framer Motion Docs
리액트 마스터클래스, 노마드코더