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

Check this similar question: http://stackoverflow.com/questions/31702054/staggering-components-on-enter-with-react-css-transition-group Also, I've used [React-bootstrap](https://react-bootstrap.github.io/components.html#transitions) transitions as I find the library easier to use. But I think, back to your example, that _transitionAppear_ prop should not be used for all children, and trigger each animation based on completion of the previous ones. — Héctor, Aug 02 '16 at 13:02

Ori Drori · Accepted Answer · 2016-08-11T20:45:28.730

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

Adding a timeout to a render function in ReactJS

1 Answers1

Linked