如何为React Transition Group中每个元素设置不同动画延迟？

这问题我之前也碰到过，其实利用CSSTransition的delay属性结合元素的索引就能轻松实现元素依次出现的效果，不用复杂的额外逻辑。具体做法如下：

核心思路 #

给每个元素的进入动画设置基于索引的递增延迟，第一个元素延迟0ms，第二个延迟nms，第三个延迟2nms...这样就能让元素按顺序依次淡入，延迟时长可以根据你的需求调整（比如100ms，短于动画时长即可）。

代码实现 #

首先是你的渲染部分，在CSSTransition组件中添加delay属性，用当前元素的索引乘以固定延迟值：

<TransitionGroup>
  {items.map((item, i) => (
    <CSSTransition
      key={item.id} // 务必使用item的唯一标识，不要用索引作为key
      timeout={{ enter: 300, exit: 300 }} // 动画时长300ms，可按需调整
      classNames="fade"
      delay={i * 100} // 每个元素延迟100ms，可根据需求修改这个数值
      // 如果只想让进入有延迟，退出同步的话，可以这样写：
      // delay={{ enter: i * 100, exit: 0 }}
    >
      <div className="item">{item.content}</div>
    </CSSTransition>
  ))}
</TransitionGroup>

然后是对应的CSS动画样式，保持常规的淡入淡出即可：

/* 进入动画 */
.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in; /* 时长要和timeout里的enter一致 */
}

/* 退出动画（如果需要的话） */
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms ease-out;
}

注意事项 #

1. key的设置：一定要用item的唯一标识（比如item.id）作为key，不要用索引，否则当列表元素顺序变化时，会导致动画异常。
2. 延迟与动画时长的关系：建议延迟时长短于动画时长，比如动画300ms，延迟100ms，这样前一个元素还在动画过程中，下一个就开始进入，视觉上会更流畅自然。
3. 退出动画的控制：如果不希望退出时也有延迟，就用delay={{ enter: i * 100, exit: 0 }}来单独控制进入阶段的延迟。

内容的提问来源于stack exchange，提问作者nbeuchat