反應的onclick啓動動畫+啓動時

我是新來的反應，我想知道什麼是應該做的最可取的方法第一個完成另一個動畫如下：反應的onclick啓動動畫+啓動時

點擊按鈕啓動動畫上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') 
);

如果有人願意幫助我，我將不勝感激:) 謝謝

來源

2016-04-25 PBulf

嘗試實現jQuery承諾。

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

在第一承諾解決啓動動畫下一容器，在第二承諾解決下一個等

來源

2016-04-25 10:48:49

轉到jquery API的網址，在您有演示的網頁底部顯示您想要執行的操作。 – 2016-04-25 10:50:23

CSS動畫

的開始動畫定義的Box2transition-delay等於transition-durationBox1。這樣，當Box1的轉換完成時，Box2將開始動畫。

.box1 { 
    /* other css */ 
    transition: all 10ms ease-in 0s; 
} 

.box2 { 
    /* other css */ 
    transition: all 10ms ease-in 10ms; 
}

的setTimeout + CSS動畫

添加setTimeout事件與延遲等於Box1的transition-duration。在setTimeout函數的回調中啓動動畫Box2。

如：

animate(box1Duration, box2Duration) { 
    animate('Box1', box1Duration); 
    setTimeout(function(){ 
     animate('Box2', box2Duration); 
     }, box1Duration); 
}

承諾+ CSS動畫

幾乎相同的實現如上述，你會得到一個更乾淨的代碼。您需要在setTimeout的回調函數中解析Promise。另外，您可以直接使用ES6 Promise。您無需在React中包含jQuery。

承諾+ requestAnimationFrame

在情況下，你的動畫是非常複雜的，你可以使用RequestAnimationFrame上Box1返回Promise。每當動畫完成時，resolve承諾對象。當返回的Promise解決時，可以使用相同的函數再次啓動Box2的動畫。

來源

2016-04-25 10:56:41

反應的onclick啓動動畫+啓動時

回答

相關問題