在ReactJS中爲渲染函數添加超時

我一直在探索ReactCSSTransitionGroup props transitionAppear和transitionEnter的動畫。在ReactJS中爲渲染函數添加超時

這些將屏幕上的註釋條目動畫化，但列表的初始加載會一次呈現所有項目。

有沒有辦法在初始加載時爲每個項目的渲染添加延遲，以便它們不會一次出現？

你可以看到完整的代碼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> 
    ) 
    } 
});

來源

2016-08-02 Nicholas Murray

請檢查類似的問題：http://stackoverflow.com/questions/31702054/staggering-components-on-enter-with-react-css-transition-group 此外，我用[React-bootstrap ]（https://react-bootstrap.github.io/components.html#transitions）轉換，因爲我發現該庫更易於使用。但我認爲，回到你的例子，_transitionAppear_道具不應該用於所有的孩子，並基於完成前面的動畫觸發每個動畫。 –

既然你遍歷的項目，以使它們，您可以使用index了越來越transition-delay分配給每個項目（demo）：

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> 
    ) 
    } 
});

來源

2016-08-02 15:47:01

在ReactJS中爲渲染函數添加超時

回答

相關問題