CSS-переходы игнорируются, потому что реагирует на повторные визуализации

Question

Я пытаюсь использовать CSS-переходы, но, как реагирует, повторно визуализирует компонент, они игнорируются.Давайте представим пример использования, в котором моя функция render() выводит что-то вроде этого:

<ul>
  <li className={this.state.path==="/menu1/" ? "active" : "inactive"}>
    menu 1
  </li>
  <li className={this.state.path==="/menu2/" ? "active" : "inactive"}>
    menu 2
  </li>
  <li className={this.state.path==="/menu3/" ? "active" : "inactive"}>
    menu 3
  </li>
</ul>

Давайте представим, что:

• .active ставит синий фон и анимирует нацвет фона
• .inactive помещает красный фон и анимирует на цвет фона

Приложение загружается с активным параметром / menu1.Используя активный маршрутизатор, я обновляю состояние, и компонент должен обновляться.При переходе на новый маршрут (например, "/ menu2 /") все работает, но при повторном рендеринге мой переход игнорируется.

Единственное решение, которое я видел, было модифицировать DOM с помощью componentDidUpdate, ноЯ не хочу, чтобы реакция управляла DOM напрямую, поэтому мой вопрос таков:

Как правильно анимировать элементы, используя реакционную систему вместе с css?

Answer 1

Правильный способ будет использовать модификаторы CSS для применения различных стилей.

Это означает, что ваш код должен выглядеть примерно так:

<ul>
  <li className={`nav-item ${this.state.path==="/menu1/" ? "nav-item--active" : ""}`}>
    menu 1
  </li>
  <li className={`nav-item ${this.state.path==="/menu2/" ? "nav-item--active" : ""}`}>
    menu 2
  </li>
  <li className={`nav-item ${this.state.path==="/menu3/" ? "nav-item--active" : ""}`}>
    menu 3
  </li>
</ul>

Допустим, вы хотите фоновый переход,Вы должны применить стили перехода и исходный цвет фона к классу .nav-item.И после этого вы добавите правило для .nav-item--active, которое просто меняет цвет фона.Я думаю, что благодаря этому вы получите ожидаемый результат.