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