feat: ✨ 使用vue的transaction组件实现页面过渡动画

Former-commit-id: f4cba1a368eb739e04995851ba742ec202f81230
2023-10-25 23:50:19 +08:00
parent 8069763e54
commit a3ef7a56ee
3 changed files with 94 additions and 6 deletions
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -6,12 +6,14 @@ const tagsViewStore = useTagsViewStore();

 <template>
  <section class="app-main">
-    <router-view v-slot="{ Component, route }">
-      <transition name="router-fade" mode="out-in">
-        <keep-alive :include="tagsViewStore.cachedViews">
-          <component :is="Component" :key="route.fullPath" />
-        </keep-alive>
-      </transition>
+    <router-view>
+      <template #default="{ Component, route }">
+        <transition name="fade-slide" mode="out-in">
+          <keep-alive :include="tagsViewStore.cachedViews">
+            <component :is="Component" :key="route.fullPath" />
+          </keep-alive>
+        </transition>
+      </template>
    </router-view>
  </section>
 </template>