From c2cdcda6ae1d9610f42c09525860d159e40afe6f Mon Sep 17 00:00:00 2001 From: ZhangXianQiang <1135831638@qq.com> Date: 星期二, 04 六月 2024 14:22:55 +0800 Subject: [PATCH] feat:添加过渡效果 --- src/style.css | 15 +++++++++++++++ src/layout/index.vue | 11 +++++++++-- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/layout/index.vue b/src/layout/index.vue index 9e50aa0..373d6cb 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -5,15 +5,22 @@ <template> <div class="page-container w-screen h-screen flex flex-col"> <Header></Header> - + <div class="page-content w-screen grow relative"> <div class="page-wrapper bg-slate-50 absolute top-0 left-0 right-0 bottom-0 overflow-y-auto"> <el-scrollbar> - <RouterView /> + <router-view v-slot="{ Component }"> + <transition appear name="fade-transform" mode="out-in"> + <keep-alive> + <component :is="Component" /> + </keep-alive> + </transition> + </router-view> </el-scrollbar> </div> </div> </div> + </template> <style scoped></style> diff --git a/src/style.css b/src/style.css index 40f37b4..e31cda7 100644 --- a/src/style.css +++ b/src/style.css @@ -21,3 +21,18 @@ display: block; } +/* fade-transform */ +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all 0.2s; +} +.fade-transform-enter-from { + opacity: 0; + transition: all 0.2s; + transform: translateX(-30px); +} +.fade-transform-leave-to { + opacity: 0; + transition: all 0.2s; + transform: translateX(30px); +} \ No newline at end of file -- Gitblit v1.8.0