The impact is commonly known as "staggered," "cascading," or "sequenced."
Instead of relying on ReactCSSTransitionGroup, you can achieve this mostly through CSS.
To begin, consider animating your cards using the animation property and @keyframes rather than the transition property. You can start by adding something like this to your CSS:
CSS
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Javascript
The solution involves setting an animation CSS style on each list item and utilizing the item index as a multiplier for a specific delay value.
Start by creating an array of objects named items, with each object containing a title and a text field (primarily needed for mapping in the example).
Create constants to represent the numerical values for the animation, such as duration and delay:
const duration = 1000; // ms
const delay = 500; // ms
Develop a template that generates a formatted string as the value for each transition element's animation CSS property:
const animStr = (i) => `fadeIn ${duration}ms ease-out ${delay * i}ms forwards`;
Map the data during rendering, and apply the CSS animation style based on the index value (i) using animStr:
{items.map((item, i) => (
<li key={i} style={{ animation: animStr(i) }}>
<SomeComponent item={item} />
</li>
))}
The animation will activate once the element is added to the DOM (as per the CSS animation spec). The syntax follows the CSS animation shorthand. Note that the default behavior is to run the animation once. Including forwards retains the properties of the last keyframe when the animation stops (fully visible).
Edit: To improve visual appeal, consider starting the delay index at 1 instead of 0. Adjust the animation value accordingly:
`fadeIn ${duration}ms ease-out ${delay * (i + 1)}ms forwards`
Working CodeSandbox
Check out the working codesandbox.
Screen Recording
This showcases how the code above appears in action, captured via a screen recording of the page reloading on CodeSandbox.
https://i.stack.imgur.com/1Daf2.gif