如何在每次重新渲染时制作动画？ （当新道具来的时候）
How to make animation on each rerender? (when new props come)
我有一个反应组件，它有来自 redux 商店的道具。每次获得新道具时，我都需要为该组件的图标制作动画。当我的组件在 componentWillUpdate() 上获得 props 时，我改变了状态。通过这种方式我可以获得动画但只是第一次，然后我已经在 DOM 元素中有了这个 class 并且新的更新不会调用动画。我怎么看我必须删除 class，它从 DOM 提供动画，但我不确定何时删除。我没有按钮，我只有道具，每次发生时我都需要动画。我读到有一种方法可以使用 refs，但我不知道在这种情况下如何使用 refs
让我们假设收到新道具时触发的动画是弹跳动画，一旦 bounce-class class 附加到所需的 HTML 元素就会触发.
- 我使用
componentDidUpdate 生命周期方法而不是 componentWillUpdate，因为我希望在更新所需的 prop 时调用 setState。它需要以前的道具和以前的状态。让我们假设，我们正在观察变化的 prop 是 bounceProp.
componentDidUpdate(prevProps, prevState) {
if (prevProps.bounceProp !== this.props.bounceProp) {
this.setState({ shouldBounce: true });
}
}
- React 依赖于综合事件，其中还包括 animation-events。我们在所需元素上使用
onAnimationEnd 事件，使 shouldBounce: false.
<div
className={
this.state.shouldBounce ? "bounce-class other-class" : "other-class"
}
onAnimationEnd={() => this.setState({ shouldBounce: false })}
/>;
此处负责动画的bounce-class class根据shouldBounce变量自动移除并应用自身。
我有一个反应组件，它有来自 redux 商店的道具。每次获得新道具时，我都需要为该组件的图标制作动画。当我的组件在 componentWillUpdate() 上获得 props 时，我改变了状态。通过这种方式我可以获得动画但只是第一次，然后我已经在 DOM 元素中有了这个 class 并且新的更新不会调用动画。我怎么看我必须删除 class，它从 DOM 提供动画，但我不确定何时删除。我没有按钮，我只有道具，每次发生时我都需要动画。我读到有一种方法可以使用 refs，但我不知道在这种情况下如何使用 refs
让我们假设收到新道具时触发的动画是弹跳动画，一旦 bounce-class class 附加到所需的 HTML 元素就会触发.
- 我使用
componentDidUpdate生命周期方法而不是componentWillUpdate，因为我希望在更新所需的 prop 时调用 setState。它需要以前的道具和以前的状态。让我们假设，我们正在观察变化的 prop 是bounceProp.
componentDidUpdate(prevProps, prevState) {
if (prevProps.bounceProp !== this.props.bounceProp) {
this.setState({ shouldBounce: true });
}
}
- React 依赖于综合事件，其中还包括 animation-events。我们在所需元素上使用
onAnimationEnd事件，使shouldBounce: false.
<div
className={
this.state.shouldBounce ? "bounce-class other-class" : "other-class"
}
onAnimationEnd={() => this.setState({ shouldBounce: false })}
/>;
此处负责动画的bounce-class class根据shouldBounce变量自动移除并应用自身。