Component loading and transition animations with react-router

Question

I am using React, react-router and I am having page-like components. I'd like to implement two phase transition animations when the main view of the application changes

• <Link> is clicked

• Old (current) view fades out (component dismount?)

• A spinner-like overlay animation "loading" is displayed

• API call is triggered and the state is updated from the server (using AJAX)

• State is updated

• Spinner-like animation fades out

• New component with freshly loaded state is fade in (component mount?)

I am looking to pointers what events, hooks and component method overloads I could use to implement this in generic manner for react-router and <Link>.

Answer 1

you can use ReactCSSTransitionGroup

import React from 'react'
import { render } from 'react-dom'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import { browserHistory, Router, Route, IndexRoute, Link } from 'react-router'
import './app.css'

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>
)

const Index = () => (
  <div className="Image">
    <h1>Index</h1>
    <p>Animations with React Router are not different than any other animation.</p>
  </div>
)

const Page1 = () => (
  <div className="Image">
    <h1>Page 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>
  </div>
)

const Page2 = () => (
  <div className="Image">
    <h1>Page 2</h1>
    <p>Consectetur adipisicing elit, se.</p>
  </div>
)

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Index}/>
      <Route path="page1" component={Page1} />
      <Route path="page2" component={Page2} />
    </Route>
  </Router>
), document.getElementById('example'))

css

.Image {
  position: absolute;
  height: 400px;
  width: 400px;
}

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

.link-active {
  color: #bbbbbb;
  text-decoration: none;
}

Answer 2

Perhaps you can try the: 1) onEnter 2) onLeave

Methods From react-router.

https://github.com/reactjs/react-router/blob/master/docs/API.md

You can flip a switch in state to change the UI to make spinner appear/disappear, etc. using the above two methods.