Was macht transitionEnterTimeout/transitionLeaveTimeout in React?

Question

Wenn ein Element in Animieren Reagieren wir Schnipsel wie verwenden:

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

Zusammen mit den beglückwünschend CSS-Animationen.

Ich habe die Dokumente lesen (hier: https://facebook.github.io/react/docs/animation.html)but Ich bin nicht 100% sicher, was die beiden Timeout-Attribute tatsächlich kann ich ahne würde und sagen, dass sie ein Rückfall sind, wenn die Animation nicht abgeschlossen

?

sollten die Werte übereinstimmen, die CSS-in/out Dauerwerte, oder sollten sie größer als die Animation Werte sein?

.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

Sie zeigen, wie lange die zugehörigen CSS-Übergänge in Anspruch nehmen. Sie sollten diese Werte auf den gleichen Satz Werte, die Sie in Ihren CSS-Klassen für das Übergangsattribut verwenden:

Dann bestimmt ReactCSSTransitionGroup, wann die hinzugefügten und entfernten Elemente berücksichtigt werden müssen, damit die richtige Aktion ausgeführt werden kann. Zu diesem Zweck hat es auf Rückrufe gewartet, was sich jedoch als sehr unzuverlässig herausstellte, da es viele Instanzen gab, in denen die Rückrufe nie aufgerufen wurden. Dies würde zum Beispiel dazu führen, dass Elemente nach dem Ende des Übergangs nie entfernt werden.