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
       }
     },