美文网首页HTML5 CanvasHTML5首页投稿(暂停使用,暂停投稿)
使用react-router实现单页面应用时设置页面间过渡的两种

使用react-router实现单页面应用时设置页面间过渡的两种

作者: gzgogo | 来源:发表于2016-06-03 17:04 被阅读3830次

    1. 官方方法(推荐)

    https://github.com/reactjs/react-router/tree/master/examples/animations

    //--js
    import React from 'react';
    import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
    
    class App extends React.Component {
      render() {
        return (
          <div className="app">
            <ReactCSSTransitionGroup
              component="div"
              className="transition-wrapper"
              transitionName="example"
              transitionEnterTimeout={500}
              transitionLeaveTimeout={500}>
              //注意这一部分很关键,不能直接使用{this.props.children}
              {React.cloneElement(this.props.children, {
                key: this.props.location.pathname
              })}
            </ReactCSSTransitionGroup>
          </div>
        );
      }
    }
    
    module.exports = App;
    
    //--css
    .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;
    }
    
    .transition-wrapper {
      height: 100%;
    }
    

    2. react-router-transition

    https://github.com/maisano/react-router-transition

    1. 安装

    npm install --save react-router-transition
    

    2. 使用

    //--js
    import React from 'react';
    import RouteTransition from 'react-router-transition';
    
    class App extends React.Component {
      render() {
        return (
          <div className="app">
            <RouteTransition
              pathname={this.props.location.pathname}
              atEnter={{ opacity: 0 }}
              atLeave={{ opacity: 0 }}
              atActive={{ opacity: 1 }}
              className="transition-wrapper">
              {this.props.children}
            </RouteTransition>
          </div>
        );
      }
    }
    
    module.exports = App;
    
    //--css
    html,
    body,
    #root,
    .app,
    .transition-wrapper,
    .transition-wrapper>div {
      height: 100%;
    }
    
    //--生成的html结构
    <div class='transition-wrapper'>
      <div style='opacity: 1'>
        <div class='app'>
          ...
        </div>
      </div>
    </div>
    

    3. 模块打包问题

    目前npm上的react-router-transition模块有问题,package.json配置的入口文件为lib/react-router-transition.js,该文件为webpack编译打包后的文件,不能再次打包,所以实际使用时需要导入src/RouteTransition.js文件,结合webpack.config.js配置如下:

    var node_modules_dir = path.join(__dirname, 'node_modules');
    
    resolve: {
      extensions: ['', '.js', 'jsx'],
      alias: {
        'react-router-transition': path.resolve(node_modules_dir,'react-router-transition/src/RouteTransition.jsx')
      }
    }
    

    参考

    Animated transitions
    maisano/react-router-transition
    misterfresh/react-easy-transition
    reactjs/react-router
    react + react-router transition
    What is the correct way to animate/transition between routes in react router

    相关文章

      网友评论

        本文标题:使用react-router实现单页面应用时设置页面间过渡的两种

        本文链接:https://www.haomeiwen.com/subject/udqldttx.html