antd mobile（六）react-router 左进右出切换界面

╰+攻爆jí腚メ 2022-06-10 10:28 166阅读 0赞

第五节我们配置了页面路由切换，但发现个问题，所有界面都是向左切换的，感觉还是不对啊，仔细分析下原生app，会发现应该是进入是左切换，返回时应该是右切换出。

第一步：修改路由动画配置信息：  
修改前的代码：

<ReactCSSTransitionGroup transitionName='left' component="div" transitionEnterTimeout={400} transitionLeaveTimeout={400}> <div key={this.props.location.pathname} style={ { position:"absolute", width: "100%"}}> { this.props.children } </div> </ReactCSSTransitionGroup>

将transitionName通过参数来设置

transitionName={animateCls}

而该参数从AppMd里面获取，这里的AppMd是dva封装的models

let {animateCls}=this.props.AppMd.AppMd;

AppMd的文件内容大概如下,初始定义了animateCls，并且定义了相应的reducers来修改animateCls参数。

import {parse} from 'qs'
    
    export default {
      namespace: 'AppMd',
      state: {
        pageNavTitle:"钢加ERP系统",
        animateCls:'right'
      },
      subscriptions: {
        setup({ dispatch, history }) {  // eslint-disable-line
        },
      },
      effects: {
      },
      reducers: {
        setCurAnimate(state, action) {
          console.log(action.curAnimate);
          //动态修改当前动画参数 要么是left 要么是right
          return { ...state, animateCls:action.curAnimate};
        }
      },
    };

修改后AppPage的代码如下：

import  React,{Component} from 'react';
    import { connect,dispatch } from 'react-redux' // 引入connect
    
    import ReactCSSTransitionGroup from "react-addons-css-transition-group";
    import style from "./Container.css";
    
    class App extends Component { 
      constructor(props, context) {
        super(props, context);
      } 
    
      componentWillMount() {
        document.body.style.margin = "0px";
        // 这是防止页面被拖拽
        document.body.addEventListener('touchmove', (ev) => { ev.preventDefault(); }); } render() { let { animateCls}=this.props.AppMd.AppMd; console.log(animateCls) return ( <ReactCSSTransitionGroup transitionName={animateCls} component="div" transitionEnterTimeout={ 400} transitionLeaveTimeout={ 400}> <div key={ this.props.location.pathname} style={ {position:"absolute", width: "100%"}}> { this.props.children } </div> </ReactCSSTransitionGroup> ); } } // 利用connect将组件与Redux绑定起来 export default connect((AppMd) => ({AppMd}))(App)

第二步：由于我们要实现左进、右出的动画，所以修改对应的Container.css文件，定义了Left、right 2种动画效果。

:global(.left-enter) { position: absolute; top: 0; background: #fff; z-index: 10000; opacity: 1; transform: translateX(100%); }
    
    :global(.left-enter.left-enter-active) { opacity: 1; transform: translateX(0); transition: all 0.4s ease-out; }
    
    :global(.left-leave) { opacity: 1; transform: translateX(0); }
    
    :global(.left-leave.left-leave-active) { opacity: 1; transform: translateX(-100%); transition: all 0.4s ease-out; }
    
    .left { position: relative; }
    
     /*right*/
    :global(.right-enter) { transform: translateX(-100%); }
    
    :global(.right-enter.right-enter-active) { transform: translateX(0); transition: all 0.4s ease-out; }
    
    :global(.right-leave) { position: absolute; top: 0; background: #fff; z-index: 10000; opacity: 1; transform: translateX(0); }
    
    :global(.right-leave.right-leave-active) { opacity: 1; transform: translateX(100%); transition: all 0.4s ease-out; }
    
    .left { position: relative; }

第三步：就是在执行界面跳转时，首先调用AppMd/setCurAnimate的dispatch来设置动画参数，再执行跳转。  
比如：点击按钮左切换跳转到角色管理界面

dispatch({
          type: 'AppMd/setCurAnimate',
          curAnimate:'left'
        });
    
        const url=object["url"];
        dispatch(routerRedux.push({ pathname: '/Role' }));

点击角色界面的返回按钮实现右出

dispatch({ type: 'AppMd/setCurAnimate', curAnimate:curAnimate }); 
        browserHistory.goBack();

ok这样就实现了左进右出切换界面