配合animate.css动态改变路由过渡动画

路由父组件中的代码：

<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回调路由，判断路由来源和目标，然后动态更新路由的动画