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: stackoverflow.com/questions/31702054/… Also, I've used React-bootstrap 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
– Héctor, Commented Aug 2, 2016 at 13:02

Ori Drori · Accepted Answer · 2016-08-11 20:45:28Z

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

Collectives™ on Stack Overflow

Adding a timeout to a render function in ReactJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related