映射一个网格，但在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对象中，我有一个classNamenode。有些节点是唯一的，并且具有不同样式的不同className。

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

我想要的效果是，每个节点在500毫秒内变成黑色的背景色，一次一个。使其具有良好的渐变图案效果。我得到的结果是，它们在500毫秒内同时变黑。

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

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

Answer 1

我想你可以用另一种方式。

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

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

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

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>;
}

然后它们应该看起来一个接一个地有动画。