Vue实现路由的转场动画 Vue内置动画

Vue实现路由的转场动画 Vue内置动画

其实在我们平时写移动端的项目的时候，产品经常会要求我们提升用户体验，
让我们制作动画，这次使用的是Vue的内置动画

要解决的问题就是

1. 首先是判断我是要进入还是要撤出
2. 实现这个左右的动画跳转

首先我们需要给每一个页面定义一个层级的顺序，决定他们到底是左滑还是右滑

上代码！！！

const routes = [
  {
    path: '/',
    name: 'home',
    component: () => import('../views/home/Home.vue'),
    meta:{
      index:1 //判断index来决定页面的层级
    },
    children:[
      {
        path:'index',
        component: () => import("../components/index/HomeIndex"),
        meta:{
          index:1
        }
      },
      {
        path:'shopcar',
        component: () => import( "../views/ShopCar"),
        meta:{
          index: 2
        }
      },
      {
        path: 'my',
        component: ()=> import("../views/My/My"),
        meta:{
          index:3
        }
      },
      {
        path:'/',
        redirect:'/index'
      }
    ]
  },
  ]

层级决定完之后我们需要在页面上进行判断了

然后我们可以在vue的文件这样写

<template>
  <div id="app">
  <!--  动态绑定他的name -->
    <transition :name="animate">
      <router-view class="Router"></router-view>
    </transition>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        animate:''
      }
    },
    //要使用watch监听来判断路由是否有改变
    watch: {
      $route(to, from) {
      //可以打印一下to 和 from 来看一下他们里面meta设置的index层级
        console.log(to,from)
        //判断进入的路由层级是否比要进入的路由层级大
        if(to.meta.index > from.meta.index){
          //设置动画名称
          this.animate= 'slide-left';
        }else{
          this.animate= 'slide-right';
        }
      }
    }
  }

</script>

<style lang="less">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.Router {
  position: absolute;
  left: 0;
  right: 0;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 800ms;
  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);
}

</style>

这样就可以使用Vue的内置动画来实现这个了

不过要记住transition只能包裹一个router-view标签