在 ReactJS 中为渲染函数添加超时答案

【问题标题】：Adding a timeout to a render function in ReactJS在 ReactJS 中为渲染函数添加超时
【发布时间】：2016-12-07 20:00:19
【问题描述】：

我一直在探索使用 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>
    )
  }
});

【问题讨论】：

检查这个类似的问题：stackoverflow.com/questions/31702054/… 另外，我使用了React-bootstrap 转换，因为我发现该库更易于使用。但我认为，回到您的示例，该 transitionAppear 道具不应用于所有孩子，并根据先前动画的完成触发每个动画。

标签： css reactjs

【解决方案1】：

由于您正在循环处理项目以呈现它们，因此您可以使用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>
    )
  }
});

【讨论】：