vue 运用transition来指定部分路由有切换过渡动画效果

现在h5混合开发APP比较流行

所以会将h5用各种办法贴近原生体验

此文章记录的是指定其中路由跳转的过渡动画

route.js配置

{
    path: "xxx",
    name: "xxx",
    meta:{
      index:0
    },
    component: resolve => require(['xxx'],resolve),
    
  },
  {
    path: "xxx",
    name: "xxx",
    meta:{
      index:1
    },
    component: resolve => require(['xxx'],resolve),
  },
  {
  	path: "xxx",
    name: "xxx",
    meta:{
      index:2
    },
  	component: resolve => require(['xxx'],resolve),
  },
  {
    path: "xxx",
    name: "xxx",
    meta:{
      index:3
    },
  	component: resolve => require(['xxx'],resolve),
  },

App.vue配置

<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import './assets/js/fontSize'
export default {
  name:"App",
  data(){
    return{
      transitionName:""
    }
  },
  watch:{
    $route(to, from) {
       //将不想有过渡动画效果的部分路由写进判断条件中
      if(to.path !=='/' && to.path !=='/' && to.path !=='/' || from.path !=='/' && from.path !=='/' && from.path !=='/'){
        //如果to索引大于from索引,判断为前进状态,反之则为后退状态
        if(to.meta.index < from.meta.index){
        //设置动画名称
          this.transitionName = 'slide-left';
        }else if(to.meta.index > from.meta.index){
          this.transitionName = 'slide-right';
        }else if(to.meta.index == 99){
          this.transitionName =""
        }
      }else{
        this.transitionName =""
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import "./assets/css/common.css";
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 500ms;
    position: absolute;
    width: 100%;
  }
  .slide-right-enter {
    left: 200%;
    transform: translate3d(-100%, 0, 0);
  }
  .slide-right-enter-to{
    left: 0;
  }
  .slide-right-leave {
    left: 0;
  }
  .slide-right-leave-to{
    left: -100%;
  }
  .slide-left-enter {
    left: -100%;
  }
  .slide-left-enter-to{
    left: 0;
  }
  .slide-left-leave{
    left:0
  }
  .slide-left-leave-to{
    left: 200%;
  }
</style>

即可实现路由跳转时 进入或者后退的左右移动过渡动画