Question

我正在使用反应，mobx，我需要动画。

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

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

任何提示？

Answer 1

无论是反应运动还是任何其他库，您始终可以使用 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>
    )
  }

React Motion：简单的链接

1 个答案: