Struggling with a CSS animation issue in ReactJs. I suspect the problem, but unsure how to solve it.
I'm rendering a 5x5 grid and displaying it using this function:
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>
)
}
This creates a 5x5 grid. Each Node object has a className of node, with some nodes having unique classes and styles.
.node {
width:20px;
height:20px;
border:1px solid gray;
cursor: pointer;
user-select: none;
background-color: black;
transition: background-color 500ms linear;
}
The intended effect was for each node to transition to a black background color over 500ms one after another, creating a fade-in effect. However, all nodes change color simultaneously after 500ms.
I suspect this is due to the pre-calculation during mapping resulting in synchronous rendering. I've tried using a setTimeout function within the map, but this caused nodes to be drawn in incorrect grid locations.