IT技术 - 在 ReactJS 中为渲染函数添加超时 - 吾爱随笔录

我一直在使用 ReactCSSTransitionGroup props transitionAppear 和 transitionEnter 探索动画。

这些动画会在屏幕上显示注释条目，但列表的初始加载会一次呈现所有项目。

有没有办法在初始加载时为每个项目的渲染添加延迟，以便它们不会立即出现？

你可以在这里看到完整的代码

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

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