9
मेरे पास ReactCSSTransitionGroup ठीक काम कर रहा है (मुझे लगता है), नया घुड़सवार घटक अपनी सभी महिमा में fades।ReactCSSTransitionGroup केवल नए घटक में एनिमेटिंग के साथ अच्छा है?
समस्याकि घटक की जगह किया जा रहा है सिर्फ अचानक गायब हो जाता है, मेरे लिए एक समस्या है क्योंकि अंत में मैं चाहूँगा कि में और व्यूपोर्ट के बाहर मेरा घटकों संक्रमण ...
मैं किसी भी देखने के लिए नहीं लग रहे है छोड़ने वाले घटक को स्पष्ट रूप से गायब होने का तरीका बताए जाने का तरीका।
क्या मुझे कुछ याद आ रहा है या ReactCSSTransitionGroup केवल आने वाले घटक को एनिमेट करने में सक्षम है?
अद्यतन
नीचे कोड:
import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, hashHistory, Link } from "react-router";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
class PageOne extends React.Component {
render() {
return (
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
<div>
HI FROM PAGE ONE<br />
<br />
<Link to="two">Take me to Page Two</Link>
</div>
</ReactCSSTransitionGroup>
);
}
}
class PageTwo extends React.Component {
render() {
return (
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
<div>
HELLO FROM PAGE TWO<br />
<br />
<Link to="/">Go back to Page One</Link>
</div>
</ReactCSSTransitionGroup>
);
}
}
const app = document.getElementById('app');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={PageOne}></Route>
<Route path="two" component={PageTwo}></Route>
</Router>,
app);
और सीएसएस:
.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;
}
स्पष्टीकरण बताते हैं आप, दिखाई पर बदलाव हो सकता है दर्ज करें और भी छोड़ देते हैं। अगर आपको यहां और मदद की ज़रूरत है, तो क्या आप कुछ कोड साझा कर सकते हैं? – wintvelt
यह देखने के लिए कि मैं किसके लिए जा रहा हूं, कम से कम कोड के साथ पोस्ट अपडेट किया गया है। उपरोक्त कोड घटक माउंट/अनमाउंट पर/बाहर फीका नहीं है। – Stefan