Question

我是React的新手，我想知道最好的方法是做什么：

点击按钮在box1上启动动画
当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 promises。

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

在第一个承诺解决开始动画下一个容器，在第二个承诺解决下一个的开始动画等。

Answer 2

CSS动画

定义transition-delay的{{1}}等于Box2的{{1}}。这样，当transition-duration的转换完成后，Box1将开始制作动画。

Box1

setTimeout + CSS动画

添加Box2个事件，延迟时间等于.box1 { /* other css */ transition: all 10ms ease-in 0s; } .box2 { /* other css */ transition: all 10ms ease-in 10ms; }的{{1}}。在setTimeout函数的回调中启动transition-duration的动画。

例如：

Box1

承诺+ CSS动画

与上面的实现几乎相同，您将获得更清晰的代码。您需要解析Box2 n setTimeout的回调函数。此外，您可以直接使用ES6 Promises。你不需要在React中包含jQuery。

Promises + requestAnimationFrame

如果您的动画非常复杂，可以在animate(box1Duration, box2Duration) { animate('Box1', box1Duration); setTimeout(function(){ animate('Box2', box2Duration); }, box1Duration); }上使用RequestAnimationFrame返回Promise。每当动画完成时，setTimeout承诺对象。当返回的Box1结算时，您可以使用相同的Promise函数再次启动resolve的动画。

反应onclick开始动画+当第一个完成时启动另一个动画

2 个答案: