Page transition using react-router and react-addons-css-transition-group

Question

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!

Where is your transitionEnterTimeout/transitionLeaveTimeout? You've set transitionAppearTimeout but not the css for it, whereas you have set enter/leave css, but you did not set timeouts for it. — Yuya
– Yuya, Commented Jun 23, 2016 at 13:52
Wow.. i missed that. Thanks for pointing out, will edit my question. Fading still don't work on going from page to page trough navigation, only on load/refresh — Plavookac
– Plavookac, Commented Jun 23, 2016 at 14:03
Have you put the enter and leave timeout/css? You've only set for appear, thus it only happens when the ReactCSSTransitionGroup loads; refresh. — Yuya
– Yuya, Commented Jun 23, 2016 at 16:02

Zachary Dahan · Accepted Answer · 2017-05-23 19:46:50Z

5

https://github.com/reactjs/react-router/blob/master/examples/animations/app.js

Instead of just rendering this.props.children, you have to clone the component, pass it the children as props. React-router then uses the key for navigation.

<ReactCSSTransitionGroup
    transitionName="example"
    transitionAppear={true}
    transitionAppearTimeout={500}
>
    {React.cloneElement(this.props.children, { key: this.props.location.pathname })}
</ReactCSSTransitionGroup>

edited May 23, 2017 at 19:46

Zachary Dahan

1,50816 silver badges26 bronze badges

answered Jun 24, 2016 at 12:25

Sam Pakvis

1897 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Plavookac Over a year ago

Now weird thing happens. screencast.com/t/ffjBz31Q I went from home to about and then contact... and it is listing all headings down..

Collectives™ on Stack Overflow

Page transition using react-router and react-addons-css-transition-group

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related