<template>
<div id="app">
<transition :name="transitionName">
<router-view></router-view>
</transition>
</div>
</template>
<script>
export default ({
watch: {
//使用watch 监听$router的变化
$route(to, from) {
//如果to索引大于from索引,判断为前进状态,反之则为后退状态
console.log(to, "to");
console.log(from, "from");
if (to.meta.transitionName = 'left') {
//设置动画名称
this.transitionName = "slide-left";
} else if(to.meta.transitionName = 'right'){
this.transitionName = "slide-right";
}else {
this.transitionName = "slide-up";
}
},
},
})
</script>
<style lang="less">
.slide-right-enter-active, .slide-right-leave-active, .slide-left-enter-active, .slide-left-leave-active {
will-change: transform;
transition: all 500ms;
vue路由跳转动画切换
最新推荐文章于 2024-07-16 17:20:09 发布