在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.transitionName = toDepth > fromDepth ? 'view-in' : 'view-out';
}
}
}
监控路由的变化,从而改变transitionName的值。最后只需要写样式就能有动画效果
.view-in-enter-active,
.view-in-leave-active,
.view-out-enter-active,
.view-out-leave-active {
will-change: transform;
transition: all 500ms ease;
height: 100%;
top: 0;
position: absolute;
width: 100%;
backface-visibility: hidden;
perspective: 1000;
}
.view-out-enter {
transform: translate3d(-100%, 0, 0);
}
.view-out-leave-active {
transform: translate3d(100%, 0, 0);
}
.view-in-enter {
transform: translate3d(100%, 0, 0);
}
.view-in-leave-active {
transform: translate3d(-100%, 0, 0);
}