From 358fbc7d2525a8beb68c027127d575da38d8f41c Mon Sep 17 00:00:00 2001
From: thehrz <thehrz@outlook.com>
Date: Sat, 12 Aug 2023 20:50:03 +0800
Subject: [PATCH] feat: add fade transition

---
 src/layouts/default.vue | 14 +++++++-------
 src/styles/main.css     | 10 ++++++++++
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index a8dd019..496568e 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -3,13 +3,13 @@
     <Nav />
 
     <v-main style="--v-layout-top: 25px;--v-layout-bottom: 70px;">
-      <router-view v-slot="{ Component }">
-        <transition name="fade">
-          <div class="prose max-w-110ch m-auto p-3">
-            <component :is="Component" />
-          </div>
-        </transition>
-      </router-view>
+      <div class="prose max-w-110ch m-auto p-3">
+        <router-view v-slot="{ Component, route }">
+          <transition name="fade">
+            <component :is="Component" :key="route.path" />
+          </transition>
+        </router-view>
+      </div>
     </v-main>
   </v-app>
 </template>
diff --git a/src/styles/main.css b/src/styles/main.css
index 7ceeeec..aa96bb0 100755
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -25,3 +25,13 @@ body,
   width: 100%;
   height: 2px;
 }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
\ No newline at end of file