vue route 设置界面之间的过渡动效

解决问题：

1.切换路由时判断是前进还是后退

2.每次切换左右动画如何实现

方法：

在基于路由的动态过渡中，需要定义路由层级，在路由元信息中增加index标记层级

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import ProcessForm from '../pages/process-form.vue'
import LeaderConfirm from '../pages/leader-confirm/leader-confirm.vue'
import Detail from '../pages/leader-confirm/detail.vue'
Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/process_form',
    name: 'process_form',
    meta: {index: 0},
    component: ProcessForm
  },
  {
    path: '/leader_confirm',
    name: 'leader_confirm',
    meta: {index: 0},
    component: LeaderConfirm
  },
  {
    path: '/detail',
    name: 'detail',
    meta: {index: 1},
    component: Detail
  }
]

const router = new VueRouter({
  // mode: 'history',
  // base: process.env.BASE_URL,
  routes
})

export default router

监控路由跳转，进行路由间层级判断出前进还是后退

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

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

增加过渡样式

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}