vue 路由动画过渡效果

为了增加用户体验，在切换路由时可加动态的过渡效果。
应用场景：

切换如上页面的底部导航栏，添加 动画过渡效果。

1、样式

/*路由切换 animation start */

.slide-left-enter-active,

.slide-left-leave-active {

  transition: 0.3s transform ease;

  backface-visibility: hidden;

  perspective: 1000;

}

.slide-left-enter {

  transform: translate3d(-100%, 0, 0);

}

.slide-left-enter-to,

.slide-left-leave {

  transform: translate3d(0%, 0, 0);

}

.slide-left-leave-to {

  transform: translate3d(100%, 0, 0);

}

.slide-right-enter-active,

.slide-right-leave-active {

  transition: 0.3s all ease-out;

  backface-visibility: hidden;

  perspective: 1000;

}

.slide-right-enter {

  transform: translate3d(100%, 0, 0);

}

.slide-right-enter-to,

.slide-right-leave {

  transform: translate3d(0, 0, 0);

}

.slide-right-leave-to {

  transform: translate3d(-100%, 0, 0);

}

/*路由切换 animation end */

2、路由配置

路由配置时，给路由对象加上meta属性，并在meta中加index属性和值，后端监听需要需要用该值来判断

routes: [{
        path: '/',//重定向
        redirect: '/home',
        meta: {
            index:1
        }
    }, {
        // 首页
        name: 'home',
        path: '/home',
        meta: {
            index:2
        },
        component: Home,
    }, {
        // 分类
        name: 'classify',
        path: '/classify',
        meta: {
            index:3
        },
        component: Classify
    }, {
        // 我的
        name: 'mine',
        path: '/mine',
        meta: {
            index:4
        },
        component: Mine
    },{
        // 吃饭吧
        name:'eat',
        path:'/eat',
        meta: {
            index:7
        },
        component:Eat
    },{
        // 购物车
        name:'cart',
        path:'/cart',
        component:Cart,
        meta: { requiresAuth: true,index:10 }
    }]

3、在App.vue中添加动态指令并监听路由

（1）给路由添加动态指令 ，并给个名字

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

（2）监听路由
根据路由对象的index值来进行比较，给当前路由页面动态指令添加对应的类名

watch:{
    $route(to,from){
      console.log(to,77);
      console.log(from,88);
      const fromIndex=from.meta.index
      const toIndex=to.meta.index
      if (toIndex > fromIndex) {
        this.transitionName = 'slide-right'
      } else if (toIndex < fromIndex) {
        this.transitionName = 'slide-left'
      } else {
        this.transitionName = ''
      }
    }
  }