I recently started learning React.js and I am now trying to play around with animations/transitions. I am using React Router and trying to implement very simple transition between pages with ReactCSSTransitionGroup. It works when I load/refresh the page but not when I go from page to page trough navigation links. Tried to make pages fade in with next code but it doesn't work:

package.json

{ "name": "reactapp", "version": "1.0.0", "description": "", "main": "main.js", "dependencies": { "babel-core": "^6.9.1", "babel-preset-react": "^6.5.0", "babel-loader": "^6.2.4", "babel-preset-es2015": "^6.9.0", "react": "^15.1.0", "react-dom": "^15.1.0", "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1" }, "devDependencies": {}, "scripts": { "start": "webpack-dev-server --inline --content-base . --history-api-fallback" }, "author": "", "license": "ISC" }

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React App</title> <link rel="stylesheet" href="/app.css"> </head> <body> <div id="app"></div> <script src="/index.js"></script> </body> </html>

index.js

import React from 'react'; import ReactDOM from 'react-dom'; import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router' import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; class App extends React.Component { render() { return ( <div> <ul> <Link to="/home">Home</Link> <Link to="/about">About</Link> <Link to="/contact">Contact</Link> </ul> <ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}> {this.props.children} </ReactCSSTransitionGroup> </div> ) } } export default App; class Home extends React.Component { render() { return ( <div> <h1>Home...</h1> </div> ) } } export default Home; class About extends React.Component { render() { return ( <div> <h1>About...</h1> </div> ) } } export default About; class Contact extends React.Component { render() { return ( <div> <h1>Contact...</h1> </div> ) } } export default Contact; ReactDOM.render(( <Router history={browserHistory}> <Route path = "/" component = {App}> <IndexRoute component = {Home} /> <Route path = "home" component = {Home} /> <Route path = "about" component = {About} /> <Route path = "contact" component = {Contact} /> </Route> </Router> ), document.getElementById('app'))

app.css

.example-appear { opacity: 0.01; } .example-appear.example-appear-active { opacity: 1; transition: opacity .5s ease-in; }

Any ideas how to make this work?

Thanks!