Chuyển đổiEnterTimeout/transitionLeaveTimeout thực sự làm gì trong React?

Question

Khi hiệu ứng động một phần tử trong Phản ứng chúng ta có thể sử dụng một đoạn như:

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

Cùng với các hình ảnh động css khen.

Tôi đã đọc các tài liệu (tìm thấy ở đây: https://facebook.github.io/react/docs/animation.html)but Tôi không chắc chắn những gì thời gian chờ hai thuộc tính thực sự tôi sẽ đánh bạo đoán 100% và nói rằng họ là một dự phòng nếu các hình ảnh động không hoàn thành

?

các giá trị nên phù hợp với css trong các giá trị ra/thời gian, hoặc họ phải lớn hơn các giá trị hình ảnh động?

.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

họ chỉ ra bao lâu chuyển CSS liên quan để hoàn thành. Bạn nên thiết lập các giá trị cùng các giá trị bạn sử dụng trong các lớp CSS của mình cho thuộc tính chuyển đổi.

ReactCSSTransitionGroup sau đó sử dụng điều này để xác định khi nào nên xem xét các yếu tố được thêm vào và xóa để có thể thực hiện hành động chính xác. Nó được sử dụng để làm điều này bằng cách lắng nghe callbacks, tuy nhiên, điều này hóa ra là thực sự không đáng tin cậy vì có rất nhiều trường hợp mà callbacks không bao giờ được gọi. Điều này sẽ khiến các yếu tố không bao giờ bị xóa sau khi quá trình chuyển đổi kết thúc, ví dụ.