如何在每个渲染器上制作动画？ （新道具来的时候）

Question

我有一个react组件，其中的道具来自redux商店。每次获得新道具时，我都需要从该组件为图标制作动画。当组件在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 });
    }
  }

1. React依赖于合成事件，该事件还包括animation-events。我们在所需元素上使用onAnimationEnd事件，以制作shouldBounce: false。

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

这里是负责动画的bounce-class类，它根据shouldBounce变量自动删除并应用自身。