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的反馈列表）当null更改为非空值时，将显示动画。

ReactCSSTransitionGroup为每个项目提供不同的transitionEnterTimeout

1 个答案: