ph-router-transition是基于React框架实现的路由切换动画组件。

安装

$ npm install ph-router-transition --save

使用

CommonJS & ES6

// CommonJS
var RouterTransition = require('ph-router-transition')
// ES6
import RouterTransition from 'ph-router-transition'

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

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

...
<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>

移动端React UI基础组件库 - phoenix-ui

Github: https://github.com/future-team/phoenix-ui

Document: http://future-team.github.io/phoenix-ui/doc/index.html

推荐Icon库 - gfs-icons

Github: https://github.com/future-team/gfs-icons

Document: https://future-team.github.io/gfs-icons/index.html