Как анимировать list в React?

Question

[Juniorrrrr]

Всем привет. Подскажите пожалуйста как правильно анимировать динамический список в реакте с использованием функциональных компонентов?
Раньше при классах можно было устанавливать и убирать анимацию в жизненных циклах.

Вот пример

Comments

[Петр Мухуров]

react-transition-group

Answer 1

[Павел Антонов]

Ставишь пакет
npm install react-transition-group

Импортируешь

import { TransitionGroup, CSSTransition } from "react-transition-group";

Анимируешь

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

Добавляешь css по вкусу

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

Обновленный пример из вопроса

PS если нравится принцип анимирования через жизненные циклы, то никто не мешает в функциональных компонентах использовать хуки, почти то же самое. Попробуй.
Вот тебе наводка Super easy react mount/unmount animations with hooks