Reactjs Smooth Render?

Question

React

Good afternoon!
Interested in the question, how is it possible to make page switching smooth?
I am using ReactJs and JSX.
Everything works fine, but when changing the page, the Render method is too sharp, it just changes the content of the block, I would like it to do this more smoothly, perhaps with a loading animation.
Tell me in which direction to dig or what can be used for a smooth Render?

Answer 1

Well, here Reacta has what you need, namely ReactCSSTransitionGroup . With this addon, you can animate content changes, and if you try a little, then page transitions.
Here is my working example using react-router :

import React from 'react/addons'
import Router, {Route, DefaultRoute, RouteHandler, Link} from 'react-router';
import RouterContainer from './services/RouterContainer';

const { CSSTransitionGroup } = React.addons;

class PageOne extends React.Component {
    render() {
        return (
            <div className="Image">
                <h1>Page 1</h1>
                <p>Тут контентик для первой страницы!</p>
            </div>
        )
    }
}

class PageTwo extends React.Component {
    render() {
        return (
            <div className="Image">
                <h1>Page 2</h1>
                <p>Тут контентик для второй страницы</p>
            </div>
        )
    }
}

class App extends React.Component {
    render() {
        var key = RouterContainer.getRoute();
        return (
            <div>
                <ul>
                    <li>
                        <Link to="/page1">Page 1</Link>
                    </li>
                    <li>
                        <Link to="/page2">Page 2</Link>
                    </li>
                </ul>
                <CSSTransitionGroup component="div" transitionName="example">
                    <RouteHandler key={key}/>
                </CSSTransitionGroup>
            </div>
        );
    }
}
//Create router config
var routes = (
    <Route handler={App} >
        <Route name="page1" handler={PageOne} />
        <Route name="page2" handler={PageTwo} />
    </Route>
);
var router = Router.create({routes});
RouterContainer.set(router);

(function (w, d, R) {
    router.run(function (Handler) {
        React.render(<Handler />, d.querySelector('#example'));
    });
}(window, document, React));

Well, styles for the transition:

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

Well, accordingly, using it without react-router will be even easier. You can, in principle, prescribe any animation for transitions. Here is a demo to illustrate the work.