What does an EnterTimeout / transitionLeaveTimeout actually do in React?

Question

When animating an element in React, we can use a fragment, for example:

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

Along with compliments to css animations.

I read the docs (found here: https://facebook.imtqy.com/react/docs/animation.html)but I'm not 100% sure what the two timeout attributes actually do? is it dangerous to assume and say that they are backup if the animation is not completed?

Should the values ​​match css in / out duration values ​​or should there be more 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 CSS related transitions take. You must set these values ​​with the same values ​​that you use in your CSS classes for the transition attribute.

The ReactCSSTransitionGroup then uses this to determine when it should consider the added and deleted elements so that it can take the right action. This used to be done by listening to callbacks, but it turned out to be really unreliable, since there were many cases where callbacks were never called. This will cause the items to never be deleted after the transition is completed, for example.