Variants สำหรับแอนิเมชันที่ประสานกัน

Variants คืออะไร

การกำหนด Variants

const cardVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: { opacity: 1, y: 0 },
};

<motion.div
  variants={cardVariants}
  initial="hidden"
  animate="visible"
  transition={{ duration: 0.4 }}
/>

คอมโพเนนต์ลูกแบบหน่วงระยะ

const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, x: -20 },
  visible: { opacity: 1, x: 0 },
};

<motion.ul variants={containerVariants} initial="hidden" animate="visible">
  {items.map(item => (
    <motion.li key={item.id} variants={itemVariants}>{item.name}</motion.li>
  ))}
</motion.ul>

การส่งต่อ Variant

// Children inherit animate="visible" from the parent automatically
const parent = { hidden: {}, visible: { transition: { staggerChildren: 0.05 } } };
const child = { hidden: { opacity: 0 }, visible: { opacity: 1 } };

<motion.div variants={parent} initial="hidden" animate="visible">
  <motion.p variants={child}>First</motion.p>
  <motion.p variants={child}>Second</motion.p>
  <motion.p variants={child}>Third</motion.p>
</motion.div>

การสลับระหว่างสถานะ

const [isOpen, setIsOpen] = useState(false);

const panelVariants = {
  closed: { height: 0, opacity: 0 },
  open: { height: 'auto', opacity: 1 },
};

<motion.div
  variants={panelVariants}
  animate={isOpen ? 'open' : 'closed'}
  initial="closed"
  transition={{ duration: 0.3 }}
/>

การเปลี่ยนผ่านแบบกำหนดเองสำหรับแต่ละ Variant

const menuVariants = {
  closed: {
    scaleY: 0,
    transition: { duration: 0.2, ease: 'easeIn' },
  },
  open: {
    scaleY: 1,
    transition: { duration: 0.3, ease: 'easeOut', staggerChildren: 0.05 },
  },
};

Exit Variants กับ AnimatePresence

const pageVariants = {
  initial: { opacity: 0, x: '100%' },
  enter: { opacity: 1, x: 0 },
  exit: { opacity: 0, x: '-100%' },
};

<AnimatePresence mode="wait">
  <motion.div
    key={router.pathname}
    variants={pageVariants}
    initial="initial"
    animate="enter"
    exit="exit"
    transition={{ duration: 0.3 }}
  />
</AnimatePresence>

การแทนที่ Variant ที่ซ้อนกัน

useAnimation สำหรับการควบคุม Variant แบบสั่งการ

const controls = useAnimation();

async function sequence() {
  await controls.start('wiggle');
  await controls.start('bounce');
}

<motion.div animate={controls} variants={{ wiggle: { rotate: 10 }, bounce: { y: -20 } }} />

ตัวเลือกการควบคุมลำดับ

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      when: 'beforeChildren', // parent fades in before stagger starts
      staggerChildren: 0.1,
    },
  },
};

ไลบรารี Variant ที่นำกลับมาใช้ได้

// lib/variants.ts
export const fadeIn = { hidden: { opacity: 0 }, visible: { opacity: 1 } };
export const slideUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } };

// Usage:
<motion.div variants={slideUp} initial="hidden" animate="visible" />

ตรวจสอบความเข้าใจ

สรุปทบทวน