ReactCSSTransitionGroup only good with animating in new component?

Question

I have ReactCSSTransitionGroup working fine (I think), the newly mounted component fades in in all its glory.

The problem is that the component being replace just abruptly disappears, a problem for me because eventually I would like that my components transition in and out of the viewport...

I don't seem to see any way of telling the leaving component how to disappear elegantly.

Am I missing something or is ReactCSSTransitionGroup only capable of animating the incoming component?

UPDATE

Code below:

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

And the 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 it looks like they had it worked out already and I just didn't discover it until now.

The React-Router git repo has a list of examples and within is one for "Animation". This demo shows how you can leverage ReactCSSTransitionGroup for animating in/out "Pages" by cloning the element and assigning a key.

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

Answer 2

I have created a bin which is working fine for components being mounted/ unmounted. Take a look and let me know if it id similar to what you are doing and still not able to solve the problem