feat: 路由动画（每个路由都可添加不同动画）

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"