ReactCSSTransitionGroupは、新しいコンポーネントでアニメーション化するだけでいいですか？

Question

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; 
} 

Answer 1

これはすでにうまくいっていて、今までそれを発見していないようです。

React-Router git repoには例のリストがあり、withinは "Animation"のものです。このデモでは、ReactCSSTransitionGroupを活用して、要素を複製してキーを割り当てることで、 "ページ"のイン/アウトをアニメーション化する方法を示します。 [トランジションを反応させる]（https://facebook.github.io/react/docs/animation.html）上

https://reacttraining.com/react-router/web/example/animated-transitions

Answer 2

私は/アンマウントマウントされているコンポーネントの正常に動作しているbinを作成しました。あなたがやっていることに似ていて、それでも問題を解決できない場合は、私に知らせてください。