标签：index vue confirm route 动效 slide active 路由

解决问题：

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);
}

标签：index,vue,confirm,route,动效,slide,active,路由
来源： https://www.cnblogs.com/xuesen1995/p/14754936.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。