我有ReactCSSTransitionGroup工作正常(我認爲),新安裝的組件淡入所有的榮耀。ReactCSSTransitionGroup只對新組件有動畫效果嗎?
的問題是,作爲替代只是突然組件將消失,我的一個問題,因爲最終我想,在進出視我的部件過渡...
我似乎沒有看到任何告訴離開組件如何優雅地消失的方式。
我是否錯過了某些東西,或者是ReactCSSTransitionGroup只能動畫傳入組件?
UPDATE
下面的代碼:
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);
而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;
}
上[反應過渡(https://facebook.github.io/react/docs/animation.html)說明解釋,你可以對出現的轉變,進入並留下。如果您需要進一步的幫助,可以分享一些代碼嗎? – wintvelt
用最少的代碼更新了帖子,以顯示我的目標。上面的代碼不會在組件mount/unmount上淡入/淡出。 – Stefan