javascript - 我如何将 CSS 过渡(例如淡入淡出)应用于 React 中的元素列表，以便它们的动画在渲染时一个接一个地排序？

Question

我一直在 Stack Overflow 和整个互联网上搜索这个问题，但找不到正确的答案，如果这是一个重复的问题，我深表歉意。

我有一个列表:

如何仅在 React 中的页面加载时将 CSS 转换逐一应用于元素列表？

我能够使用 ReactCSSTransitionGroup，它工作正常，但它同时将过渡应用到整个列表。

react :

<ul className="item-list">
  <ReactCSSTransitionGroup transitionName="fade" transitionAppear={true}
    transitionAppearTimeout={2000}>
    {props.items.map((item, i) => (<li><someComponent/></li>)}
  </ReactCSSTransitionGroup>
</ul>
...

CSS:

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

正如我之前提到的，我需要将上述转换一个接一个地应用于元素列表。

Answer 1

我认为这种效果通常被称为“交错”、“级联”或“顺序”。

除了使用 ReactCSSTransitionGroup，您可以主要使用 CSS 来完成此操作。

首先，我会使用 animation 为您的卡片制作动画属性(property)和@keyframes而不是 transition属性(property)。因此，首先，您可以在 CSS 中添加类似这样的内容:

CSS

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

Javascript

解决方案的关键是设置一个 animation每个列表项的 CSS 样式，并将项索引用作指定 delay 值的乘数。

我首先创建了一个名为 items 的对象数组，其中每个对象都包含一个 title 和一个 text 字段(主要是只需要一个示例中要映射的数组)。

我还创建了几个常量来抽象动画的两个数值，duration 和 delay(注意我们只用 delay 做数学运算 在接下来的示例中，但在我看来，也拉出 duration 看起来更干净):

const duration = 1000; // ms
const delay = 500; // ms

制作了一个模板，该模板返回一个格式化字符串，用作每个过渡元素的 animation 的值。 CSS 属性:

const animStr = (i) => `fadeIn ${duration}ms ease-out ${delay * i}ms forwards`;

在渲染期间映射数据，并通过animStr根据索引值(i)设置CSS animation样式:

{items.map((item, i) => (
  <li key={i} style={{ animation: animStr(i) }}>
    <SomeComponent item={item} />
  </li>
))}

一旦该元素被注入(inject)到 DOM 中(根据 CSS 动画规范)，动画就会激活。语法基于 css animation shorthand .请注意，动画的默认行为是运行一次。添加forwards规则导致动画在停止时保留最后一个关键帧的属性(完全可见)。

---

编辑:就我个人而言，我认为从 1 而不是 0 开始延迟索引看起来更好，因此您可以设置您的 animation对此的值(value):

`fadeIn ${duration}ms ease-out ${delay * (i + 1)}ms forwards`

---

工作代码沙箱

这是一个 working codesandbox .

---

屏幕录制

这就是上面代码的实际效果。这是在 CodeSandbox 上重新加载页面的屏幕录像。