Transition css animation works only once - css

Question

I have a problem with css animation in react app triggering by useState. Animation between width changes works only once on one component. (I have array of tags on upper level)
...
const [isMounted, setIsMounted] = useState(false);
useEffect(() => {
console.log(isMounted);
setIsMounted(true);
// setIsMounted(false);
return () => {
console.log('There is');
setIsMounted(false);
}
}, []);
...
<div
id={item.label}
onKeyDown={onKeyDown}
className={isMounted ? 'i-tag' : 'no-tag' }
> {`some text`}
</div>
and scss here
.i-tag {
width: 100px;
position: relative;
max-width: max-content;
transition: width 1s ease-in;
}
.no-tag {
#extend .i-tag;
width: 0;
}

Answer 1

You can use TransitionGroup with CSSTransition for animating array of components.
Actually there are 2 ways to achieve animation of array of components in React,
By your own code which is bit trickier to do it perfectly
use some packages like 'react-transition-group' which is much easier to integrate
If you would like to use the package 'react-transition-group', here is the codesandbox on how to use it
<TransitionGroup component="ul">
{todos.map((todo) => (
<CSSTransition key={todo} timeout={700} classNames="item">
<li>
{todo}{" "}
<button
onClick={() => {
setTodos(todos.filter((t) => t !== todo));
}}
>
Delete
</button>
</li>
</CSSTransition>
))}
</TransitionGroup>
Courtesy: https://typeofnan.dev/how-to-animate-items-out-of-an-array-in-react/