ReactCSSTransitionGroup seulement bon avec l'animation dans les nouveaux composants?

J'ai ReactCSSTransitionGroup fonctionne bien (je pense), le nouvellement monté composant fondus dans dans toute sa splendeur.

Le problème est que la pièce à remplacer juste disparaît brusquement, un problème pour moi parce que finalement, je voudrais que mes composants de transition dans et hors de la fenêtre d'affichage...

Je n'ai pas l'impression de voir de toute façon de raconter l'laissant composante comment disparaître d'élégance.

Suis-je raté quelque chose ou est ReactCSSTransitionGroup seulement capable de l'animation de l'entrants composant?

Mise à JOUR

Code ci-dessous:

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

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

OriginalL'auteur Stefan | 2016-03-07