vue App.vue router 过渡效果, keep-alive 结合使用示例
1, router.js配置 每个路由的index值
2, router.js配置 每个路由的keepAlive值
app.vue 代码
<template>
<div id="app">
<transition :name="transition">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
</transition>
<transition :name="transition">
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>
</div>
</template>
<style>
@import url("../static/css/reset.css");
@import url("../static/css/transition.css");
</style>
<script>
export default {
name: "App",
data() {
return {
transition: ""
};
},
watch: {
$route(to, from) {
if (to.meta.index > from.meta.index) {
this.transition = "slide-left";
} else {
this.transition = "slide-right";
}
}
},
}
</script>
transition.css代码
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
will-change: transform;
transition: all 500ms;
position: absolute;
width:100%;
height:100%;
}
.slide-right-enter {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
opacity: 0;
transform: translate3d(-100%, 0, 0);
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步