各divを一度にアニメーション化する方法

Question

私はバックエンドから返されるアイテムのリストを持っています。各アイテムはdivによって一種のタイルを形成しています。レンダリングされたばかりでなく、個別にアニメーション化したいと思います。問題は、アイテムがすべて一緒に返され、レンダリング関数がそれらをすべて一緒にレンダリングすることです。そのため、CSSのアニメーションはすべてのタイルで同時に表示されますが、私が望むのはすべてのタイルに「ランダム」なバウンス効果があることです。各タイルは2秒以内に表示されますが、ランダムに表示されます。

これは可能ですか？

Answer 1

class AnimateItemComponent extends React.Component 
{ 
    static propTypes = 
    { 
     animate: React.PropTypes.bool 
    }; 

    render() 
    { 
     let aniamte = this.props.aniamte; 
     let style = {}; 
     let className = ["item-class"]; 
     let time = parseInt(Math.random() * 2000); // Maximum of 2 seconds 

     if (aniamte) 
     { 
      // Consider support more prefixes 
      style.animationDelay = time + "ms"; 
     } 

     if (this.props.active) 
      className.push("animate"); // Class the activate the animation 

     return React.createElement("div", {className, style}, "My text"); 
    } 
} 

class AnimateComponent extends React.Component 
{ 
    constructor() 
    { 
     this.state = {}; 

     // Initialize the value to keep the prop types boolean 
     this.state.aniamte = false; 

     // Our items to handle, can be easily replaced with the setState. 
     this.state.items = ["a", "b", "c", "d", "e"]; 
    } 

    render() 
    { 
     let content = []; 
     let items = this.state.items; 
     let aniamte = this.state.aniamte; 

     content = items.map(item => 
     { 
      return React.createElement(AnimateItemComponent, {animate}); 
     }); 

     return content; 
    } 

    startAnimation() 
    { 
     this.setState({aniamte: true}); 
    } 

    stopAnimation() 
    { 
     this.setState({aniamte: false}); 
    } 

    serverRequest() 
    { 
     // Activate animation: 
     this.startAnimation(); 

     // Stop animation 
     this.stopAnimation(); 
    } 
} 

Answer 2

あなたは仕事のためにvelocity.jsのスタガー機能を使用することができます。また、自分で似た何かを書く：そのようなタイプ{divElement, timeout}の要素で満たされる個別の配列を作成 - レッツは、この配列pairsを呼び出す（埋めるために元の配列を走査し、すべての要素に0〜2/の2分の範囲内でタイムアウトを割り当てます）、レンダリング関数（元の配列ではなく）で使用する空の配列 - newArrayを割り当てます。あなたはpairs配列を用意して、それを横断し、各要素に対してこの関数を呼び出した後：

pairs.forEach(({divElement, timeout})=> { 
     setTimeout(()=>{ 
     newArray.push(divElement) 
     }, timeout) 
}) 

、それはそれだ、あなたはすぐにnewArrayの内容をレンダリングする（私は仮定の配列をJSXにマッピングし）、それが最終的に取得しますあなたが最初に持っていたすべての部署でいっぱいになりました。