Ivica Obadic Ivica Obadic - 1 year ago 243
React JSX Question

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

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 Source

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


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


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

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

      {React.cloneElement(children, {
        key: location.pathname

Full example

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download