如何在Framer Motion中结合delay与staggerChildren实现动画

你的核心问题是父元素过渡配置错误+子元素变体复用不当，导致stagger效果被覆盖。以下是修正方案：

问题根源 #

1. 你给父元素的enter过渡直接加了delay:1，这会让整个父容器的动画（包括子元素的stagger队列）整体延迟1秒，但子元素又复用了父元素的变体，继承了这个delay，最终所有子元素在1秒后同时触发动画。
2. staggerChildren需要配合delayChildren（而非父元素的delay）来实现“先整体延迟，再依次stagger”的效果。

修正后的代码 #

1. 拆分父子变体 #

// 父元素变体：仅控制子元素的stagger规则
const PARENT_VARIANTS = {
  initial: {},
  enter: {
    transition: {
      delayChildren: 1, // 所有子元素动画统一延迟1秒开始
      staggerChildren: 0.25 // 子元素依次间隔0.25秒触发
    }
  }
};

// 子元素变体：仅定义自身的动画效果
const CHILD_VARIANTS = {
  initial: { opacity: 0 },
  enter: {
    opacity: 1,
    transition: { duration: 0.25 }
  }
};

2. 组件使用 #

<motion.h1 initial="initial" animate="enter" variants={PARENT_VARIANTS}>
  <motion.span variants={CHILD_VARIANTS}>John</motion.span>{" "}
  <motion.span variants={CHILD_VARIANTS} className="circle">
    Doe
  </motion.span>{" "}
  <motion.span variants={CHILD_VARIANTS}>John</motion.span>
</motion.h1>

效果说明 #

• 父元素的delayChildren:1：让所有子元素的动画在1秒后才开始进入队列。
• staggerChildren:0.25：子元素按照渲染顺序，每个比前一个晚0.25秒触发opacity动画。
• 子元素仅负责自身的动画属性，避免了和父元素的过渡规则冲突。

额外技巧 #

如果需要给某一个子元素单独加额外延迟，直接在子元素上配置即可，不会影响整体stagger：

<motion.span 
  variants={CHILD_VARIANTS} 
  transition={{ delay: 0.5 }} // 这个子元素会在整体1秒延迟的基础上，再额外晚0.5秒触发
>
  单独延迟的文本
</motion.span>

内容的提问来源于stack exchange，提问作者Osman Emre Gundogdu