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

第五节我们配置了页面路由切换，但发现个问题，所有界面都是向左切换的，感觉还是不对啊，仔细分析下原生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 (
      "div"
        transitionEnterTimeout={400}
        transitionLeaveTimeout={400}>
        
this.props.location.pathname}
             style={{position:"absolute", width: "100%"}}>
          {
            this.props.children
          }
        
      
    );
  }
}
// 利用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这样就实现了左进右出切换界面