javascript - 映射网格但在 css 动画 reactjs 中让每个节点延迟

Question

我在处理一些 CSS 动画时遇到了问题，我知道它为什么不起作用，但我不确定如何克服它。这是在 ReactJs 中完成的。

我渲染一个网格，比方说 5、5。

然后我继续使用如下函数显示网格:

  DisplayNodes = () => {
    const {grid} = this.state; // get the node array from state
    return (
      <div id="grid">
        {grid.map((rowMap, rIndex) => {
          return (
            <div class="row">
              {rowMap.map((node,nIndex) => {
                return (
                  <Node/>
                );
              })}
            </div>
          )
        })}
      </div>
    )
  }

这将生成一个 5 x 5 的网格。

在 Node 对象中，我有一个名为 node 的类名。一些节点是唯一的，具有不同样式的不同类名。

.node {
  width:20px;
  height:20px;
  border:1px solid gray;
  cursor: pointer;
  user-select: none;
  background-color: black;
  transition: background-color 500ms linear;
}

我想要的预期效果是每个节点将在 500 毫秒内变成其黑色背景色，一次一个。给它一个很好的淡入淡出的图案效果。我得到的结果是它们同时变黑超过 500 毫秒。

我相信这是因为在映射过程中它是预先计算的，然后一次完成渲染。不完全确定如何延迟这个。

我尝试在 map 中添加一个 setTimeout 函数，但随后在尝试延迟其他节点时，它们最终被绘制在网格的错误位置。

Answer 1

我猜你可以用另一种方式做到这一点。

您可以从头开始计算延迟时间，而不是一个一个地延迟它们。

例如，我假设您希望每个节点需要 500 毫秒才能变成另一种颜色，然后下一个节点开始转动并使用另一个 500 毫秒，那么对于第一个节点它应该延迟 0 毫秒时间，但对于第二个节点它应该延迟 500 *1 ms 时间，第三个应该是 500*2 ms，等等。

因此，映射代码应该将节点的索引传递给节点本身:

 DisplayNodes = () => {
    const {grid} = this.state; // get the node array from state
    return (
      <div id="grid">
        {grid.map((rowMap, rIndex) => {
          return (
            <div class="row">
              {rowMap.map((node,nIndex) => {
                return (
                  <Node index={nIndex}/>
                );
              })}
            </div>
          )
        })}
      </div>
    )
  }

在节点渲染函数中，您应该为其设置适当的过渡延迟 CSS。

Node =(index)=>{
  const delay = index*500 + "ms";
  return <div style={{transitionDelay:delay }}>...<div>;
}

然后他们应该一个接一个地看起来是动画的。