Animation before routing to another page using react, redux and react-router-redux

Question

I am working on an app that is built on the frontend using react, redux and react-router-redux for navigation and i don't have much frontend expirience. When i need to perform routing from one page to another, first i need to show animation, and then after the animation finishes, i need to navigate to another page. I was thinking about firing one action that will add the animation class, and when that action finishes, should i use something similar like setTimeout so when animation ends, the push action to be fired from react-router-redux ? What are other ways to find solution to the problem ?

Answer 1

You can use react-addons-css-transition-group

ReactCSSTransitionGroup is based on ReactTransitionGroup and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent ng-animate library.

This will trigger a transition in your main layout every time you change a route

css

.example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

.example-enter.example-enter-active {
  opacity: 1;
}

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0;
}

js

import React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'

const App = ({ children, location }) => (
  <div>
    <ul>
      <li><Link to="/page1">Page 1</Link></li>
      <li><Link to="/page2">Page 2</Link></li>
    </ul>

    <ReactCSSTransitionGroup
      component="div"
      transitionName="example"
      transitionEnterTimeout={500}
      transitionLeaveTimeout={500}
    >
      {React.cloneElement(children, {
        key: location.pathname
      })}
    </ReactCSSTransitionGroup>
  </div>
)

Full example