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

来源：互联网发布：sql sever设置主键自增编辑：程序博客网时间：2024/06/04 06:33

第五节我们配置了页面路由切换，但发现个问题，所有界面都是向左切换的，感觉还是不对啊，仔细分析下原生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' // 引入connectimport 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这样就实现了左进右出切换界面

阅读全文

0 0