ट्रांज़िशन एंटरटाइमआउट/ट्रांज़िशन लाइवटाइम वास्तव में क्या प्रतिक्रिया करता है?

Question

जब में एक तत्व एनिमेट प्रतिक्रिया हम इस तरह के रूप में एक स्निपेट का उपयोग कर सकते हैं:

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

प्रशंसा सीएसएस एनिमेशन के साथ।

मैं डॉक्स (यहां पाया पढ़ा है: https://facebook.github.io/react/docs/animation.html)but मैं 100% यकीन है कि क्या दो टाइमआउट विशेषताओं वास्तव में कि मैं एक अनुमान खतरे हैं नहीं कर रहा हूँ और कहते हैं कि वे अगर एनीमेशन पूरा नहीं करता है एक fallback हैं

?

मूल्यों/बाहर अवधि मूल्यों में सीएसएस से मेल खाना चाहिए, या वे एनीमेशन मूल्यों से अधिक होना चाहिए?

.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

वे संकेत मिलता है कि कब तक जुड़े सीएसएस बदलाव को पूरा करें। आप एक ही करने के लिए इन मूल्यों को स्थापित करना चाहिए ले आपके द्वारा सीएसएस कक्षाओं में संक्रमण गुणों के लिए उपयोग किए जाने वाले मान।

ReactCSSTransitionGroup तब यह निर्धारित करने के लिए उपयोग करता है कि इसे तत्वों को जोड़ा और हटाए जाने पर विचार करना चाहिए ताकि यह सही कार्रवाई कर सके। यह कॉलबैक सुनने के द्वारा ऐसा करने के लिए किया जाता था, हालांकि, यह वास्तव में अविश्वसनीय साबित हुआ क्योंकि कई उदाहरण थे जहां कॉलबैक कभी नहीं बुलाए गए थे। संक्रमण के समाप्त होने के बाद तत्वों को कभी भी हटाया नहीं जा सकता है, उदाहरण के लिए।