Что делает переходEnterTimeout/transitionLeaveTimeout на самом деле в React?

Question

При анимации элемента в React мы можем использовать фрагмент, такие как:

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

вместе с Дополняющими CSS анимацией.

Я прочитал документацию (найти здесь: https://facebook.github.io/react/docs/animation.html)but Я не 100% уверен, что два тайма-аута атрибуты на самом деле я бы догадку и сказать, что они являются запасным вариантом, если анимация не завершится

?

Если эти значения совпадают с CSS в/из значений длительности, или они должны быть больше, чем значения анимации?

.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

они показывают, как долго, связанные с CSS переходы, чтобы закончить. Вы должны установить эти значения в то же самое значения, используемые в ваших классах CSS для атрибута перехода.

ReactCSSTransitionGroup затем использует это, чтобы определить, когда он должен учитывать добавленные и удаленные элементы, чтобы он мог предпринять правильные действия. Раньше это делалось, слушая обратные вызовы, однако это оказалось действительно ненадежным, поскольку было много случаев, когда обратные вызовы никогда не вызывались. Это приведет к тому, что элементы никогда не будут удалены после завершения перехода, например.