Компонентная загрузка и переходные анимации с реактивным маршрутизатором

Question

Я использую React, response-router, и у меня есть подобные страницы. Я хотел бы реализовать две анимации фазовых переходов, когда основной вид применения изменений

• <Link> щелчке

• Старый (ток) вид исчезает (компонент демонтируют?)

• Отображается анимация «наложения» в виде прядильщика

• Выполняется вызов API и состояние обновляется с сервера (с использованием AJAX)

• государство обновляется

• Spinner, как анимация затухает

• Новый компонент с недавно загруженным состояния выгорает (компонент монтирования?)

Я ищу указатели, что события, перехваты перехватчиков компонентов и компонентов, которые я мог бы использовать, чтобы реализовать это в общем виде для react-router и <Link>.

Answer 1

Может быть, вы можете попробовать: 1) OnEnter 2) OnLeave

Методы От среагировать-маршрутизатора.

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

Вы можете щелкнуть переключатель в состоянии изменить пользовательский интерфейс, чтобы сделать кок появляются/исчезают, и т.д., используя указанные выше два метода.

Answer 2

вы можете использовать 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; 
}