Как сделать анимацию на каждом рендере?(когда приходят новые реквизиты)

Question

У меня есть реактивный компонент, у которого есть реквизиты из магазина редуксов. Мне нужно делать анимацию для иконки из этого компонента каждый раз, когда я получаю новые реквизиты. Я изменяю состояние, когда мой компонент получает реквизит на componentWillUpdate (). Таким образом, я могу получить анимацию, но только в первый раз, тогда у меня уже есть этот класс в элементе DOM, и новое обновление не вызывает анимацию. Как я вижу, я должен удалить класс, который обеспечивает анимацию из DOM, но я не уверен, когда это делать. У меня нет кнопок, у меня есть только реквизит, и каждый раз, когда это происходит, мне нужна анимация. Я читал, что есть способ с ссылками, но я не знаю, как использовать ссылки в такой ситуации

Answer 1

Предположим, что анимация, которая запускается при получении новых реквизитов, является анимацией отказов, которая запускается, когда класс bounce-class добавляется к желаемому элементу HTML.

1. Вместо componentWillUpdate я использую метод жизненного цикла componentDidUpdate, поскольку я хочу вызывать setState при обновлении требуемой реквизита. Требуется предыдущий реквизит и предыдущее состояние. Предположим, что опора, которую мы наблюдаем за изменениями, составляет bounceProp.

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.bounceProp !== this.props.bounceProp) {
      this.setState({ shouldBounce: true });
    }
  }

2. React использует Synthetic Events, который также включает animation-events . Мы используем событие onAnimationEnd для нужного элемента, чтобы сделать shouldBounce: false.

<div
  className={
    this.state.shouldBounce ? "bounce-class other-class" : "other-class"
  }
  onAnimationEnd={() => this.setState({ shouldBounce: false })}
/>;

Здесь класс bounce-class, отвечающий за анимацию, автоматически удаляет и применяет сам себя на основе переменной shouldBounce.