javascript - 响应 onclick 启动动画 + 第一个动画完成后启动另一个动画

Question

我是 React 新手，我想知道执行以下操作的最佳方法是什么:

1. 单击按钮在 box1 上启动动画
2. 当 box1 动画完成时 box2 动画开始

这是我的组件:

var StartButton = React.createClass({
  render: function() {
    return (
      <div>
        <button>Start</button>
      </div>
    );
  }
});

var Box1 = React.createClass({
  render: function() {
    return (
      <div>
        <div className="box1"></div>
      </div>
    );
  }
});

var Box2 = React.createClass({
  render: function() {
    return (
      <div>
        <div className="box2"></div>
      </div>
    );
  }
});


var App = React.createClass({
  render: function() {
    return (
      <div>
       <StartButton/>
        <Box1/>
        <Box2/>
      </div>
    );
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('react-app')
);

如果有人愿意帮助我，我将非常感激:)谢谢

Answer 1

尝试实现 jQuery promise 。

https://api.jquery.com/promise/

在第一个 promise 解决启动下一个容器的动画，在第二个 promise 解决启动下一个容器的动画等。