时间戳

首页 > 解决方案 > 映射网格但在css动画reactjs中具有每个节点延迟

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

问题描述

我在处理一些 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对象中，我有一个 className 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 毫秒内同时变黑。

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

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

标签： javascriptcssreactjs

解决方案

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

您可以从一开始就计算延迟时间，而不是一一延迟。

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

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

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

然后他们应该一个一个看起来有动画。

推荐阅读