ReactJSのレンダリング機能にタイムアウトを追加する

Question

私はReactCSSTransitionGroupの小道具であるtransitionAppearとtransitionEnterを使ってアニメーションを調べています。

これらは、ノートの入力をアニメーション表示しますが、リストの最初の読み込みによってすべてのアイテムが一度にレンダリングされます。

初期ロード時に各アイテムのレンダリングに遅延を追加して、一度に表示されないようにする方法はありますか？あなたがそれらをレンダリングするためのアイテムをループしているので、あなたは完全なコードhere

var NotesList = React.createClass({ 
    render: function(){ 
    var notes = this.props.notes.map(function(note, index){ 
     return (<li className="list-group-item" key={index}> 
       <b>{note}</b> 
       </li>); 
    }) 
    return (
     <ul className="list-group"> 
     <ReactCSSTransitionGroup transitionName="fade" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}> 
      {notes} 
     </ReactCSSTransitionGroup> 
     </ul> 
    ) 
    } 
}); 

Answer 1

を見ることができます

、あなたは、各項目（demo）に成長しているtransition-delayを割り当てるためにindexを使用することができます。

var NotesList = React.createClass({ 
    firstTime: true, // is this the 1st render 
    render: function(){ 
    var delay = this.firstTime ? 500 : 0 // delay 500 for first time, 0 for all others 
    var notes = this.props.notes.map(function(note, index){ 
     // add the transition-delay using the index to increment it 
     return (<li className="list-group-item" key={index} style={{ transitionDelay: `${index * delay}ms` }}> 
       <b>{note}</b> 
       </li>); 
    }) 

    this.firstTime = false // turn of first time 

    return (
     <ul className="list-group"> 
     <ReactCSSTransitionGroup transitionName="fade" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}> 
      {notes} 
     </ReactCSSTransitionGroup> 
     </ul> 
    ) 
    } 
});