Ну тут у 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 будет еще проще. Анимацию для переходов вы можете в принципе прописать любую. Вот
демочка для иллюстрации работы.
