From b1702ed7fea86de86572df5620fc060d8411a184 Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Wed, 13 Oct 2021 10:31:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B7=AF=E7=94=B1=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=EF=BC=88=E6=AF=8F=E4=B8=AA=E8=B7=AF=E7=94=B1=E9=83=BD=E5=8F=AF?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=B8=8D=E5=90=8C=E5=8A=A8=E7=94=BB=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/appMain.vue | 27 +++++++++++++++++++++++++--
 src/router/modules/components.ts  |  8 +++++++-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/layout/components/appMain.vue b/src/layout/components/appMain.vue
index 8ef1512ca..49c9d15dc 100644
--- a/src/layout/components/appMain.vue
+++ b/src/layout/components/appMain.vue
@@ -1,17 +1,40 @@
 <script setup lang="ts">
-import { ref, getCurrentInstance } from "vue";
+import { ref, computed, getCurrentInstance } from "vue";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
 
 const keepAlive: Boolean = ref(
   getCurrentInstance().appContext.config.globalProperties.$config?.KeepAlive
 );
+
+const transition = computed(() => {
+  return route => {
+    return route.meta.transition;
+  };
+});
 </script>
 
 <template>
   <section class="app-main">
     <router-view>
       <template #default="{ Component, route }">
-        <transition appear name="fade-transform" mode="out-in">
+        <transition
+          :name="
+            transition(route) && route.meta.transition.enterTransition
+              ? 'pure-classes-transition'
+              : (transition(route) && route.meta.transition.name) ||
+                'fade-transform'
+          "
+          :enter-active-class="
+            transition(route) &&
+            `animate__animated ${route.meta.transition.enterTransition}`
+          "
+          :leave-active-class="
+            transition(route) &&
+            `animate__animated ${route.meta.transition.leaveTransition}`
+          "
+          mode="out-in"
+          appear
+        >
           <keep-alive
             v-if="keepAlive"
             :include="usePermissionStoreHook().cachePageList"
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index 8ecc004b2..5c55be40f 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -20,7 +20,6 @@ const componentsRouter = {
       meta: {
         title: "message.hsvideo",
         showLink: true,
-        keepAlive: true,
         savedPosition: true
       }
     },
@@ -32,6 +31,9 @@ const componentsRouter = {
         title: "message.hsmap",
         showLink: true,
         keepAlive: true,
+        transition: {
+          name: "fade"
+        },
         savedPosition: true
       }
     },
@@ -42,6 +44,10 @@ const componentsRouter = {
       meta: {
         title: "message.hsdraggable",
         showLink: true,
+        transition: {
+          enterTransition: "animate__zoomIn",
+          leaveTransition: "animate__zoomOut"
+        },
         savedPosition: true
       }
     },