路由动画 Module

路由切换组件

• 通过transitionName设置动画类型，可选[fade, slide-top, slide-bottom, slide-left, slide-right]。
• 通过loadedCallback函数设置动画完成的回调。
• 可通过timeout设置动画时间，和设置的css的动画时间一致是最流畅的。
• 在列表页的最外层元素加ph-transition-index类，其他页面跳转到列表页都是回退的效果，到另一个新页面都是前进的效果。

主要属性和接口：

• transitionName:动画类型/动画名称，默认fade。
• loadedCallback:动画完成的回调函数。
• timeout:动画时间。

示例：

 import RouterTransition from 'ph-router-transition';

 const PageTransition = (props)=>(
     <RouterTransition {...props} transitionName="slide-left" loadedCallback={()=>{console.log('end!!!');}} timeout={500}>{props.children}</RouterTransition>
 );

 let Index = class index extends Component {
     render() {
         return (
             <div className="menu ph-transition-index">
                 ...
             </div>
         );
     }
 };

 <Router history={this.history}>
     <Route component={PageTransition}>
         <Route path="/index" name="index" component={Index} />
         <Route path="/detail" name="detail" component={Detail} />
         ...
         <Redirect from="/" to="/index" />
     </Route>
 </Router>