在vue中使用动画时,包裹一个transition标签
app.vue:
<template>
<div id="app">
<transition :name="transitionName">
<router-view/>
</transition>
</div>
</template>
其中transitionName是一个变量,由js控制可以改变其值
export default {
name: 'app',
data: function() {
return {
transitionName: ''
}
},
watch:{
'$route' (to, from) {
const routeDeep = ['index', 'rules', 'dividequery','weekentry', 'prepareentry', 'answer', 'success'];
const toDepth = routeDeep.indexOf(to.name);
const fromDepth = routeDeep.indexOf(from.name);
this.transitionN