react-motion - React Motion：简单的链接

Question

我正在使用反应，mobx，我需要为事物制作动画。

我想做一个简单的动画链接：当第一个动画结束时，第二个开始。

作为用例考虑一个部分模板：每次用户更改部分时，当前部分淡出，然后下一个部分淡入。

有什么提示吗？

Answer 1

无论 react-motion 或任何其他库，您始终可以使用onAnimationEnd动画事件监听器。

使用此方法，您可以检测 css 动画何时在相关 html 元素上结束并执行方法功能。然后您可以选择要做什么，例如使用 setState()：

animation1 = () => {
   this.setState({
      animation1: true
   })
 }
animation2 = () => {
   this.setState({
      animation2: true
   })
 }

animation3 = () => {
   this.setState({
      animation3: true
   })
 }

render() {
   return (
     <div>
       <div onAnimationEnd={this.animation1}>
         First animation
       </div>
       <div onAnimationEnd={this.animation2}>
         Second animation
      </div>
      <div onAnimationEnd={this.animation3}>
         Third animation
      </div>
     </div>
    )
  }