ReactCSSTransitionGroup va bene solo con l'animazione nel nuovo componente?

Question

Ho ReactCSSTransitionGroup che funziona bene (credo), il componente appena montato sfuma in tutta la sua gloria.

Il problema è che il componente essendo sostituire solo bruscamente scompare, un problema per me perché alla fine mi piacerebbe che il mio passaggio componenti dentro e fuori della finestra ...

non mi sembra di vedere qualsiasi modo di dire alla componente in uscita come scomparire elegantemente.

Mi manca qualcosa oppure ReactCSSTransitionGroup è in grado solo di animare il componente in ingresso?

UPDATE

codice qui sotto:

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

E il 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

Ok sembra che l'abbiano già elaborato e io non l'ho scoperto fino ad ora.

Il repository git React-Router ha un elenco di esempi e uno è all'interno di "Animazione". Questa demo mostra come puoi sfruttare ReactCSSTransitionGroup per animare dentro/fuori "Pagine" clonando l'elemento e assegnando una chiave.

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

Answer 2

ho creato una bin che sta funzionando benissimo per i componenti essere montato/smontato. Dai un'occhiata e fammi sapere se è id simile a quello che stai facendo e ancora non è in grado di risolvere il problema