Adding a timeout to a render function in ReactJS

Question

I have been exploring animations with the ReactCSSTransitionGroup props transitionAppear and transitionEnter.

These animate the entry of the notes onscreen but the initial load of the list renders all the items at once.

Is there a way to add a delay to the rendering of each item on initial load so that they do not appear at once?

You can see the full code 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

Since you're looping over the items to render them, you can use the index to assign a growing transition-delay to each item (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>
    )
  }
});