ReactCSSTransitionGroup不同transitionEnterTimeout每個項目

Question

我可以動畫的10項塊這樣的：

render() { 
     const feedbackList = this.props.feedbackList.map((oneFeedback,index) => { 

     return (
      <FeedbackItem feedback={oneFeedback} language={this.props.language} key={oneFeedback.Code.toString() }/> 
     ) 
    }); 
    return (
     <div> 
      <ul> 
       <ReactCSSTransitionGroup transitionName = "feedbacks" transitionEnterTimeout={500} transitionLeaveTimeout={500}> 
       <div key={index.toString()}> 
        {feedbackList} 
    </ReactCSSTransitionGroup> 
      </ul> 
     </div> 
    ); 
} 

但我想它們的動畫在不同的時間爲每個項目。事情是這樣的：

render() { 
     const feedbackList = this.props.feedbackList.map((oneFeedback,index) => { 
     return (
      <ReactCSSTransitionGroup transitionName = "feedbacks" transitionEnterTimeout={index*500} transitionLeaveTimeout={index*500}> 
       <div key={index.toString()}> 
        <FeedbackItem feedback={oneFeedback} language={this.props.language} key={oneFeedback.Code.toString() }/> 
       </div> 
      </ReactCSSTransitionGroup> 
     ) 
    }); 
    return (
     <div> 
      <ul> 
        {feedbackList} 
      </ul> 
     </div> 
    ); 
} 

通知我如何設置transitionLeaveTimeout不同的每個項目，有每個項目在不同的時間離開變淡的效果，但這種方法是行不通的。如何爲每個項目製作不同的transitionEnter超時？

Answer 1

您將需要有包含空值的反饋列表。 （而不是長度爲0的反饋列表） 當空值更改爲非空值時，動畫將出現。