How to animate a list in React?

Question

React

Hello. Can you please tell me how to animate a dynamic list in React using functional components?
Previously, with classes, it was possible to set and remove animations in life cycles.
Here is an example

Answer 1

Install the package
Import
Animate

<TransitionGroup className="items-section__list">
  {list.map(elem => (
    <CSSTransition key={elem} timeout={500} classNames="move">
      <h5 key={elem}>{elem}</h5>
    </CSSTransition>
  ))}
</TransitionGroup>

Add css to your liking

.move-enter {
  opacity: 0.01;
  transform: translate(-40px, 0);
}

.move-enter-active {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 500ms ease-in;
}

.move-exit {
  opacity: 1;
  transform: translate(0, 0);
}

.move-exit-active {
  opacity: 0.01;
  transform: translate(40px, 0);
  transition: all 500ms ease-in;
}

An updated example from the PS question,
if you like the principle of animation through life cycles, then no one bothers to use hooks in functional components, almost the same. Try.
Here's a tip Super easy react mount/unmount animations with hooks