RouterTransition

路由切换组件

  • 通过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>

方法

属性

事件

Extends Component
Defined in: src/RouterTransition.js:6
Module: 路由动画

Available since 0.1.0

Constructor

RouterTransition

RouterTransition ()

Defined in src/RouterTransition.js:6

Available since 0.1.0

Example:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Redirect, Router, Route } from 'react-router';
import History from 'history/lib/createHashHistory';
import RouterTransition from 'ph-router-transition';

import Detail from './detail.js';
import About from './about.js';

let Index = class Index extends Component {
    render() {
        return (
            <div className="index-wrapper ph-transition-index">
                <header>
                    ph-router-transition
                </header>
                <ul className="index-menu">
                    <li><a href="#/detail">Detail</a></li>
                    <li><a href="#/about">About</a></li>
                </ul>
            </div>
        );
    }
}

const PageTransition = class PageTransition extends Component{
    loadedCallback(){
        // 切换结束的回调函数
    }

    render(){
        return (
            <RouterTransition {...this.props} transitionName="slide-left" loadedCallback={::this.loadedCallback}>
                {this.props.children}
            </RouterTransition>
        )
    }
}

let AppRouter = class AppRouter extends Component {
    constructor(props, context) {
        super(props, context);
        this.history = new History({
            queryKey: false
        });
    }

    render() {
        return (
            <Router history={this.history}>
                <Route component={PageTransition}>
                    <Route path="/index" name="index" component={Index} />
                    <Route path="/detail" name="detail" component={Detail} />
                    <Route path="/about" name="about" component={About} />
                    <Redirect from="/" to="/index" />
                </Route>
            </Router>
        );
    }
};

let App = class App extends Component {
    constructor(props, context) {
        super(props, context);
    }

    render() {
        return (
            <div>
                <AppRouter />
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

方法

loadedCallback

loadedCallback ()

Defined in src/RouterTransition.js:67

动画结束执行的回调

属性

timeout

Number

Defined in src/RouterTransition.js:74

动画时间，和设置的css的动画时间一致是最流畅的

Default:

500

transitionName

String

Defined in src/RouterTransition.js:60

动画名称，可选[fade, slide-top, slide-bottom, slide-left, slide-right]

Default:

'fade'