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

Did you ever find a solution to your original ask? Looking for the same implementation but haven't found any examples so far. — Whnunlife
– Whnunlife, Commented Jun 16, 2017 at 17:37

Cheng Sieu Ly · Accepted Answer · 2016-06-28 15:04:52Z

1

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.

answered Jun 28, 2016 at 15:04

Cheng Sieu Ly

1,1669 silver badges7 bronze badges

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

Comments

Kokovin Vladislav · Accepted Answer · 2016-06-28 15:07:07Z

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

I am aware of transition group. But this answer does not show how to tie in the spinner animation before the component has loaded its state.

Collectives™ on Stack Overflow

Component loading and transition animations with react-router

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related