React Academy · 课时

用于编排动画的变体

Q: 「用于编排动画的变体」这节课中我会学到什么？

定义具名变体对象，并在父子组件树中传递它们。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

定义具名变体对象，并在父子组件树中传递它们。

用于编排动画的变体 是 CoddyKit 上的免费 React Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

什么是变体

变体是以对象形式定义的命名动画状态。组件不再使用内联值，而是引用 'hidden' 和 'visible' 等变体名称。父组件可以自动协调子组件。

定义变体

创建包含命名状态的 variants 对象，并将其传递给 motion 组件的 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 }}
/>

依次显示子组件

在父组件的过渡设置中使用 staggerChildren，让子组件依次播放动画，并在每个子组件之间加入延迟。

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>

变体传播

当父组件的变体状态发生变化时，所有具有相同变体名称的子组件也会自动播放动画 — 无需为每个子组件传递 animate。

// 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>

在状态之间切换

使用状态变量控制当前处于激活状态的变体。Framer Motion 会在命名状态之间平滑过渡。

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 }}
/>

为每个变体自定义过渡

在变体中添加 transition 键，即可仅为该特定状态自定义时间安排。

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

使用 AnimatePresence 的退出变体

在 variants 对象中添加 exit 键，并将组件包裹在 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>

嵌套变体覆盖

子组件可以使用自己的 initial 或 animate 属性覆盖继承的变体状态，在需要时脱离父组件的协调。

使用 useAnimation 进行命令式变体控制

useAnimation() 返回一个动画控制对象。以编程方式调用 controls.start('variantName') 即可触发变体。

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 } }} />

协调选项

除了 staggerChildren 之外，还可以使用 when（'beforeChildren' | 'afterChildren'）来安排父组件和子组件动画的先后顺序。

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

可复用的变体库

将变体定义在共享文件中，并在需要的地方导入，以保持整个应用的动画配置一致。

// 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" />

快速检查

哪个 Framer Motion 过渡选项会让子组件动画依次延迟播放？

回顾

变体是以对象形式定义的命名状态。在父组件的过渡设置中使用 staggerChildren，即可自动将动画依次传递给子组件。使用 useAnimation() 进行命令式控制，并结合 AnimatePresence 和退出变体创建卸载动画。

常见问题解答

「用于编排动画的变体」课时是免费的吗？

是的 — 「用于编排动画的变体」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「用于编排动画的变体」这节课中我会学到什么？

定义具名变体对象，并在父子组件树中传递它们。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「用于编排动画的变体」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Academy 课中编写并运行代码吗？

能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Academy