What does transitionEnterTimeout/transitionLeaveTimeout actually do in React?

Question

When animating an element in React we can use a snippet such as:

      <div>
        <button onClick={this.handleAdd}>Add Item</button>
        <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
          {items}
        </ReactCSSTransitionGroup>
      </div>

Along with the complimenting css animations.

I have read the docs (found here: https://facebook.github.io/react/docs/animation.html)but I am not 100% sure what the two timeout attributes actually do? I would hazard a guess and say they are a fallback if the animation doesn't complete?

Should the values match the css in/out duration values, or should they be greater than the animation values?

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

Answer 1

They indicate how long the associated CSS transitions take to complete. You should set these values to the same values you use in your CSS classes for the transition attribute.

ReactCSSTransitionGroup then uses this to determine when it should consider the elements added and removed so it can take the correct action. It used to do this by listening for callbacks, however, this turned out to be really unreliable since there were lots of instances where the callbacks were never called. This would cause elements to never be removed after the transition ended, for example.