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