Vue页面跳转动画效果实现

页面的前进后退，想要有前推和后推的运动效果，需要在每次路由触发的时候，来判断到底该使用前推还是后推的动画，所以就需要在每一个页面的路由上手动设置一个值，即用这个值来判断页面跳转的方向。

roter.js

meta 中的 index 就是上面提到的那个值，按照页面的先后顺序分别提前写好

export default new Router({
  mode: 'history',
  base: 'view',
  routes: [
    {
      path: '/login',
      name: 'login',
      meta:{
        index:1,
        title: '登陆/注册',
        auth:true,
      },
      component: () => import('./views/Login.vue')
    },
    {
      path: '/', //个人中心
      name: '',
      meta:{
        index:2,
        title:'个人中心',
        auth:true,
      },
      component: () => import('./views/PersonalCenter.vue'),
    },
    {
      path: '/personalInformation',//个人信息
      name: 'personalInformation',
      meta:{
        index:3,
        title:'个人信息',
        auth:true,
      },
      component: () => import('./views/PersonalInformation.vue')
    },
    {
      path: '/changeUserPhoneNum',//修改个人信息
      name: 'changeUserPhoneNum',
      meta:{
        index:4,
        title:'修改个人信息',
        auth:true,
      },
      component: () => import('./views/ChangeUserPhoneNum.vue')
    },
  ]
})

app.vue

在使用的时候，需要用watch 监听$router的变化，如果to索引大于from索引,判断为前推状态,反之则为后推状态，剩下的就是css了

<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive include="placeOrder">
        <router-view/>
      </keep-alive>
    </transition>
  </div>
</template>

script>
export default {
  data () {
    return {
      transitionName: 'fold-left'
    }
  },
  watch: {//使用watch 监听$router的变化
    $route(to, from) {
      //如果to索引大于from索引,判断为前进状态,反之则为后退状态
      if(to.meta.index > from.meta.index){
        this.transitionName = 'fold-left';
        }else{
        this.transitionName = 'fold-right';
      }
    },
  }
}
</script>


<style>
@import url(./assets/css/base.css);
html,body,#app {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  overflow: auto;
}

.fold-left-enter-active {
    animation-name: fold-left-in;
    animation-duration: .3s;
  }
  .fold-left-leave-active {
    animation-name: fold-left-out;
    animation-duration: .3s;
  }
  @keyframes fold-left-in {
    0% {
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
      /* visibility: visible; */
    }
    /*50% {
      transform: translate3d(50%, 0, 0);
    }*/
    100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fold-left-out {
    0% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    /*50% {
      transform: translate3d(-50%, 0 , 0);
    }*/
    100% {
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      /* visibility: hidden; */
    }
  }
  .fold-right-enter-active {
    animation-name: fold-right-in;
    animation-duration: .3s;
  }
  .fold-right-leave-active {
    animation-name: fold-right-out;
    animation-duration: .3s;
  }
  @keyframes fold-right-in{
    0% {
      width: 100%;
      -webkit-transform: translate3d(-100%, 0, 0);
      transform: translate3d(-100%, 0, 0);
      /* visibility: visible; */
    }
    /*50% {
      transform: translate3d(50%, 0, 0);
    }*/
    100% {
      width: 100%;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fold-right-out  {
    0% {
      width: 100%;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    /*50% {
      transform: translate3d(-50%, 0 , 0);
    }*/
    100% {
      width: 100%;
      -webkit-transform: translate3d(100%, 0, 0);
      transform: translate3d(100%, 0, 0);
      /* visibility: hidden; */
    }
  }
</style>