vue路由跳转动画_Vue路由跳转动画

1.App.vue中添加

export default {

name: 'App',

data(){

return{

animate: ""

}

},

watch: {

$route(to, from) {

if (to.meta.tx > from.meta.tx) {

this.animate= "right";

} else {

this.animate= "left";

}

}

}

}

.right-enter-active,

.right-leave-active,

.left-enter-active,

.left-leave-active {

transition: all 200ms;

}

.right-enter {

transform: translate3d(-100%, 0, 0);

}

.right-leave-to {

transform: translate3d(100%, 0, 0);

}

.left-enter {

transform: translate3d(100%, 0, 0);

}

.left-leave-to {

transform: translate3d(-100%, 0, 0);

}