Cosa fa in realtà transitionEnterTimeout/transitionLeaveTimeout in React?

Question

Quando animazione di un elemento in React possiamo utilizzare un frammento come:

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

Insieme con le animazioni css complimenti.

Ho letto la documentazione (che si trova qui: https://facebook.github.io/react/docs/animation.html)but io non sono sicuro al 100% quello che i due timeout attributi in realtà non vorrei azzardare un'ipotesi e dire che sono un ripiego se l'animazione non completa

??

Qualora i valori corrispondono ai css nei valori/durata, o dovrebbero essere superiori ai valori di animazione?

.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

indicano per quanto tempo le transizioni CSS associati prendono per completare. Si dovrebbe impostare questi valori allo stesso valori che utilizzi nelle tue classi CSS per l'attributo di transizione

ReactCSSTransitionGroup quindi utilizza questo per determinare quando deve considerare gli elementi aggiunti e rimossi in modo che possa intraprendere l'azione corretta. Faceva ciò ascoltando i callback, tuttavia, ciò risultava inaffidabile in quanto vi erano molti casi in cui i callback non venivano mai chiamati. Ciò farebbe sì che gli elementi non vengano mai rimossi dopo la transizione, ad esempio.