React Router v4 component transition with ReactCSSTransitionGroup add-on

Question

I am trying to do a very simple component opacity transition in react. I am using the ReactCSSTransition group to perform this and I believe I have set things up correctly but it does not seem to be working. I would appreciate any help on this please see below my codepen:

let {BrowserRouter,Link,Route} = ReactRouterDOM;

let Router = BrowserRouter;

let ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

class Artwork extends React.Component {

render() {
return (
  <div>
        <h3>Art</h3>
    </div>
  );
 }
}

class Home extends React.Component {
render() {
return (
  <h1>Home</h1>
  );
 }
}

class User extends React.Component {

render() {
return (

  <div className="row">
    <div className="col-md-4">
        <h3>The User Page</h3>
        <p>User ID:</p>
        <li><Link to="/user/artwork">Artwork</Link></li>
    </div>
    <div className="col-md-8">
        <Route path="/user/artwork" component={Artwork}/>
    </div>

  </div>

  );
 }
}



 class App extends React.Component {

 render() {
 return (

  <Router>
        <div className="container">
            <div className="row">
                <div className="col-xs-10 col-xs-offset-1">
                  <ul>
                    <li><Link to="/user">User</Link></li>
                    <li><Link to="/home">Home</Link></li>
                  </ul>
                </div>
            </div>
            <hr/>
            <div className="row">
                <div className="col-xs-10 col-xs-offset-1">
                  <ReactCSSTransitionGroup 
                     transitionName="example"
                     transitionAppear={true}
                     transitionAppearTimeout={1500}>
                    <Route path="/" exact component={Home}/>
                    <Route path="/home" exact component={Home}/>
                    <Route path="/user" component={User}/>
                  </ReactCSSTransitionGroup>

                </div>
            </div>
        </div>
    </Router>

   );
  }

 }

ReactDOM.render(
<App />,
document.getElementById('root')
);

CSS

.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity 1500ms ease-in;
}

React route transitions

Thank you

score 2 · Accepted Answer · edited Oct 24 '17 at 04:43

2

You need to wrap each of your routed components in <CSSTransitionGroup> so you can create higher order functions to return component which is wrapped in <CSSTransitionGroup>. For ex. check the below codepen, I updated it with animation.

http://codepen.io/anon/pen/ZKENXy?editors=0111

For higher order components, you can head over here.

https://facebook.github.io/react/docs/higher-order-components.html

edited Oct 24 '17 at 04:43

Shea Hunter Belsky

2,815
3
22
31

answered Apr 13 '17 at 12:55

Sagar Rabadiya

4,126
1
21
27

Thank you for the example, in your codepen I noticed that the sub route component 'Artwork' animates twice when clicked on. Is there a way to stop this behaviour from occurring. You would only want it animating the one time when it is clicked. – W9914420 Apr 13 '17 at 16:51
for me its working correct i mean clicking on it animates, also if you don't want that animation on sub route, just remove TransitionedPage function in artwork route and it won't animate. :) – Sagar Rabadiya Apr 13 '17 at 17:44
notice how if you click again on either the 'home' or 'user' links once that particular component has loaded that the animation will not play again. However the 'Artwork' component will continuously replay if you keep pressing the link again and again, is this the correct behaviour? if so how would you rewrite it to act like the root links? tnx – W9914420 Apr 13 '17 at 22:16
react will re render the component tree when url changes so 1 way is to use individual transition element in sub page for ex. check the codepen again i have updated it. – Sagar Rabadiya Apr 14 '17 at 08:55
Thank you for this exceptional answer, I am positive this example will help many others, many many tnxs :) – W9914420 Apr 14 '17 at 10:44
I noticed that the components fade in but do not fade out when they are exited. Is that possible or can we only do a transition on entering the component. – W9914420 Apr 15 '17 at 12:37
when using css transition group it uses *-enter and *-leave classes so you can apply both transitions. – Sagar Rabadiya Apr 17 '17 at 06:02

React Router v4 component transition with ReactCSSTransitionGroup add-on

1 Answers1