路由父組件中的代碼：

<template>
  <div id="container"> 
  <transition 
  :name="transition.name" 
  :enter-active-class="transition.enterActiveClass" :leave-active-class="transition.leaveActiveClass">
      <router-view></router-view>
  </transition>
  </div>
</template>
<script>
let transitions = {
  toggleLeft: {
    name: 'toggleLeft',
    enterActiveClass: 'animated slideInRight',
    leaveActiveClass: 'animated slideOutLeft'
  },
  toggleRight: {
    name: 'toggleRight',
    enterActiveClass: 'animated slideInLeft',
    leaveActiveClass: 'animated slideOutRight'
  },
  popupUp: {
    name: 'popupUp',
    enterActiveClass: 'animated slideInDown',
    leaveActiveClass: 'animated slideOutDown'
  },
  popupDown: {
    name: 'popupDown',
    enterActiveClass: 'animated slideInUp',
    leaveActiveClass: 'animated slideOutUp'
  }
}
export default {
  data(){
    return {
      transition: transitions.toggleLeft,
      transitions: transitions
    }
  },
  watch: {
    '$route'(to, from) {
      let transitions = this.transitions
      if(from.name == 'rule') {
        this.transition = transitions.popupUp
      } else if(to.name == 'rule') {
        this.transition = transitions.popupDown
      } else if(from.name == 'check') {
        this.transition = transitions.popupUp
      } else if(to.name == 'check') {
        this.transition = transitions.popupDown
      } else {
        this.transition = transitions.toggleLeft
      } 
    }
  }
}
</script>

以上實現過渡動畫的動態切換的關鍵點是：
1 使用watch監聽$route的，根據相關的from、to回調路由，判斷路由來源和目標，然后動態更新路由的動畫