React中如何为列表项在渲染时添加依次触发的CSS transitions淡入效果

解决方案 #

你可以通过给每个列表项绑定动态过渡延迟实现逐个加载效果，无需更换现有依赖，改动最小：

1. 修改React代码

给map遍历出的每个<li>元素添加内联样式，和当前项的索引i绑定，每一项比前一项多延迟固定时间即可：

<ul className="item-list">
  <ReactCSSTransitionGroup 
    transitionName="fade" 
    transitionAppear={true}
    transitionAppearTimeout={2000}
  >
    {props.items.map((item, i) => (
      <li 
        key={item.id /* 注意必须加唯一key，不要用index做key除非列表是静态不会变更的 */}
        style={{ transitionDelay: `${i * 150}ms` }}
      >
        <someComponent/>
      </li>
    ))}
  </ReactCSSTransitionGroup>
</ul>

这里的150是每两个列表项过渡的间隔时间，单位为毫秒，你可以根据需求调整数值大小。

2. 调整CSS代码

保持原有过渡规则不变即可，延迟会通过内联样式覆盖生效：

.fade-appear{
  opacity: 0;    
}
.fade-appear-active{
  opacity: 1;
  transition: opacity 500ms ease-out;    
}

如果需要兼容低版本场景，也可以把transition-delay写到自定义类上，通过索引动态绑定类名即可，逻辑和上述方案一致。

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