上面样例中可以发现，不管是从哪个页面跳转到哪个页面，过渡效果都是淡入淡出。下面我们对其作个功能改进：

• 当进入下一层级时（下一步），当前页面向左滑出，同时新页面从右侧滑入。
• 但返回上一层级时（上一步），当前页面向右滑出，同时新页面从左侧滑入。
• 如果是同层级切换，则使用淡入淡出效果。

（2）要实现上面的效果，首先我们在路由文件（router\index.js）中，在每个路径的路由元信息 meta 中设置个 depth 属性值，用来表示其路由的深度（层级）

import Vue from 'vue'
import Router from 'vue-router'
import step1 from '@/components/step1'
import step2 from '@/components/step2'
import step3 from '@/components/step3'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'step1',
      component: step1,
      meta: {
        depth: 1
      }
    },
    {
      path: '/step2',
      name: 'step2',
      component: step2,
      meta: {
        depth: 2
      }
    },
    {
      path: '/step3',
      name: 'step3',
      component: step3,
      meta: {
        depth: 3
      }
    }
  ]
})

（3）然后监听 $route，根据 to、from 元信息中的 depth 值的大小，设置不同的跳转动画。

<template>
  <div id="app">
    <transition
      :enter-active-class="enterTransition"
      :leave-active-class="leaveTransition">
      <keep-alive>
        <router-view/>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      enterTransition: 'animated fadeIn',
      leaveTransition: 'animated fadeOut',
    }
  },
  watch: {
    '$route' (to, from) {
      let toDepth = to.meta.depth;
      let fromDepth = from.meta.depth;
      if (fromDepth > toDepth) {
        this.enterTransition = 'animated fadeInLeft';
        this.leaveTransition = 'animated fadeOutRight';
      } else if (fromDepth < toDepth) {
        this.enterTransition = 'animated fadeInRight';
        this.leaveTransition = 'animated fadeOutLeft';
      } else {
        this.enterTransition = 'animated fadeIn';
        this.leaveTransition = 'animated fadeOut';
      }
    }
  }
}
</script>

二、给 vue-navigation 设置过渡动画

1，基本用法

<template>
  <div id="app">
    <transition mode="out-in"
      enter-active-class="animated fadeIn"
      leave-active-class="animated fadeOut">
      <navigation>
        <router-view/>
      </navigation>
    </transition>
  </div>
</template>

（1）效果图

• 当进入下一层级时（下一步），当前页面向左滑出，同时新页面从右侧滑入。
• 但返回上一层级时（上一步），当前页面向右滑出，同时新页面从左侧滑入。
• 如果是同层级切换，则使用淡入淡出效果。

• 当在使用 vue-router 进行路由导航时，如果想实现前进后退使用不同过渡动画，我们需要在路由文件中进行相应的配置，这样略显麻烦。
• 而如果我们项目中使用的是 vue-navigation 这个导航库话那就十分简单了，因为它可以识别除路由的前进后退，无须对 router 进行多余的设置。