Reactjs плавный Render?

Question

[LeMaX]

Добрый день!

Интересует вопрос, как возможно сделать переключение страниц плавным?
Использую ReactJs и JSX.

Все работает отлично, но при смене страницы, метод Render слишком резкий, просто меняет содержимое блока, хотелось бы чтобы он делал это более плавно, возможно с анимацией загрузки.

Подскажите в какую сторону копать или что можно использовать для плавного Render'а ?

Answer 1

[Михаил Горячкин]

Ну тут у Reacta есть то что вам нужно, а именно ReactCSSTransitionGroup. При помощи этого аддончика можно анимировать смену контента, ну и если постараться немного, то и переходы по страницам.
Вот мой рабочий примерчик с использованием 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));

Ну и стили для перехода:

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

Ну и соответственно использование без react-router будет еще проще. Анимацию для переходов вы можете в принципе прописать любую. Вот демочка для иллюстрации работы.