VUE如何实现切换页面时的过渡动画?

最近再写页面的时候，感觉页面之间的切换有点生硬，所以查了一下文档看见了transition这个组建，很实用，故此在这里跟大家分享一下

---------------------------------------------------------

---------------------------------------------------------

---------------------------------------------------------

1、解决这个问题的难点就是如何来确定路由是前进还是后退的问题，下面是解决的方案

a) 我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画.

router/index.js

import VueRouter from 'vue-router'
import Home from '../components/home/home'
import User from '../components/user/user'
var router = new VueRouter({
  routes:[{
    name:'test',
    path:'/',
    meta:{index:0}, // meta对象的index用来定义当前路由的层级,由小到大,由低到高
    component:{template:'<div>test</div>' }},
    {
      name:'home',
      path:'/home',
      meta:{index:1},
      component:Home
    },
    {
      name:'user',
      path:'/user/:id',
      meta:{index:2},
      component:User
    }]
  }
});

监控路由跳转,判断切换页面之间的层级关系,并以此来判断路由前进或者后退.

<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-left 和 slide-right 类的动画

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