使用react-router組件加載和過渡動畫

Question

我使用的是React，react-router和我有類似頁面的組件。我想實現兩個階段的過渡動畫，當應用程序的主視圖改變

• <Link>點擊

• 舊（當前）視圖淡出（成分下馬？）

• 顯示類似微調的疊加動畫「加載」

• API調用被觸發並且狀態從服務器更新（使用AJAX）

• 狀態更新

• 微調般的動畫淡出

• 新組件與新加載的狀態是淡入（部件安裝？）

我期待指針什麼事件，鉤子和組件方法重載我可以用它來以通用的方式實現這個react-router和<Link>。

Answer 1

或許你可以嘗試： 1）的OnEnter 2）onLeave

方法從反應路由器。

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

可以在狀態翻轉開關來改變UI以使使用上述兩種方法噴絲出現/消失，等等。

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