[motion] 종료 애니메이션 예시 코드

팍 사라지는게 아니고 스르륵 사라져벌임

import { motion, AnimatePresence } from "motion/react";
import { useState } from "react";

const FadeExample = () => {
  const [isVisible, setIsVisible] = useState(false);

  const fadeVariants = {
    initial: { opacity: 0 },
    animate: { opacity: 1 },
    exit: { opacity: 0 }
  };

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? "숨기기" : "보이기"}
      </button>
      
      <AnimatePresence>
        {isVisible && (
          <motion.div
            variants={fadeVariants}
            initial="initial"
            animate="animate"
            exit="exit"
            style={{
              width: 200,
              height: 200,
              backgroundColor: "blue",
              marginTop: 20
            }}
          >
            페이드 애니메이션
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};