14
मेरे पास एक ReactCSSTransitionGroup है जिसका उपयोग मैं सीएसएस मॉड्यूल के साथ कर रहा हूं (और प्रतिक्रिया-राउटर से गतिशील रूटिंग लेकिन मुझे विश्वास है कि यह अपेक्षित के रूप में काम कर रहा है)।सीएसएस मॉड्यूल के साथ ReactCSSTransitionGroup
<ReactCSSTransitionGroup
component="div"
transitionName={transitions}
transitionAppear
transitionAppearTimeout={1000}
transitionEnterTimeout={2000}
transitionLeaveTimeout={2000}
>
{React.cloneElement(this.props.children, {
key: location.pathname,
})}
</ReactCSSTransitionGroup>
appear और leave संक्रमण पूरी तरह से काम - लेकिन enter बदलाव नहीं करते हैं - वे बस, तुरंत दिखाई पिछले घटक बाहर fading के बाद नए घटक में प्रवेश किया है के साथ।
सीएसएस (सीएसएस मॉड्यूल का उपयोग करके):
.enter {
opacity: 0.01;
}
.enter.enterActive {
opacity: 1;
transition: opacity 500ms ease-in;
}
.leave.leaveActive {
opacity: 0.01;
transition: opacity 2000ms ease-in;
}
.appear {
opacity: 0.1;
transition: opacity 1000ms ease-out;
}
.appearActive {
opacity: 1;
transition: opacity 1000ms ease-out;
}
--- संपादित करें ---
मुझे पता चला कि यह बच्चे मार्गों पर अपेक्षा के अनुरूप काम करता है (मैं केवल का एक छोटा सा मुट्ठी भर है मेरे ऐप में वे)। बाल मार्गों सहित सभी मार्ग गतिशील रूप से लोड किए गए हैं, इसलिए मुझे अभी भी यकीन नहीं है कि उन मामलों में क्या काम करना है, लेकिन दूसरों में नहीं।
इस बेला की कोशिश, मैंने 2000 से https .enter.enteractive का समय बदल दिया: //jsfiddle.net/dcfsyre2/ तो क्या आप जिस समस्या का सामना कर रहे हैं उसे समझा सकते हैं? या आप एक पहेली पोस्ट कर सकते हैं और समस्या की व्याख्या कर सकते हैं –
मुझे संदेह है कि यह उस स्थान की वजह से है जहां आप अपनी सीएसएस शैलियों को आयात करते हैं। जितनी जल्दी हो सके इसे प्रभाव बनाने के लिए कुछ रूट मॉड्यूल में अपनी सीएसएस फ़ाइलों को आयात करने का प्रयास करें। –