Question

我一直在使用ReactCSSTransitionGroup的props 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

由于您要对项目进行循环以进行渲染，因此您可以使用index为每个项目（demo）分配不断增长的transition-delay：

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

在ReactJS中向渲染函数添加超时

1 个答案: