💥 feat: 更新路由动画

src/App.vue

@@ -1,11 +1,24 @@
 <template>
   <router-view v-slot="{ Component, route }">
-    <transition :name="route.meta.transition || 'fade-transform'" mode="out-in">
+    <transition
+      :enter-active-class="
+        route.meta.transition?.enter
+          ? `animate__animated ${route.meta.transition.enter}`
+          : 'animate__animated animate__fadeInLeft animate__faster'
+      "
+      :leave-active-class="
+        route.meta.transition?.leave
+          ? `animate__animated ${route.meta.transition.leave}`
+          : 'animate__animated animate__fadeOutLeft animate__faster'
+      "
+      mode="out-in"
+    >
       <component :is="Component" :key="route.path" />
     </transition>
   </router-view>
 </template>
 
+<script lang="ts" setup></script>
 <style lang="scss">
 #app {
   width: 100%;

src/router/modules/home.ts

@@ -6,7 +6,10 @@ const routes: RouteConfigsTable[] = [
     path: '/welcome',
     name: 'welcome',
     component: () => import('@/views/welcome/index.vue'),
-    meta: { transition: 'fade', title: '后台管理系统标题', headerType: HeaderTypeEnum.default },
+    meta: {
+      title: '后台管理系统标题',
+      headerType: HeaderTypeEnum.default,
+    },
   },
   {
     path: '/smart-park',
@@ -16,6 +19,10 @@ const routes: RouteConfigsTable[] = [
       title: '智慧智能监管中心',
       subtitle: '车辆监控中心',
       headerType: HeaderTypeEnum.subtitle,
+      transition: {
+        enter: 'animate__bounceInUp animate__faster',
+        leave: 'animate__bounceOutUp',
+      },
     },
   },
   {
@@ -24,8 +31,12 @@ const routes: RouteConfigsTable[] = [
     component: () => import('@/views/data-analyse/index.vue'),
     meta: {
       title: '数据分析',
-      subtitle: '车辆监控中心',
+      subtitle: '数据分析中心',
       headerType: HeaderTypeEnum.subtitle,
+      transition: {
+        enter: 'animate__bounceIn animate__faster',
+        leave: 'animate__bounceOut',
+      },
     },
   },
   {

src/types/router.d.ts

@@ -0,0 +1,11 @@
+// types/router.d.ts
+import 'vue-router';
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    transition?: {
+      enter: string;
+      leave: string;
+    };
+  }
+}

src/types/router/Route.ts

@@ -1,12 +1,20 @@
 import type { RouteComponent } from 'vue-router';
 
+/**
+ * @description 动画入场和离场
+ */
+interface Transition {
+  enter?: string;
+  leave?: string;
+}
+
 /**
  * @description 完整子路由的`meta`配置表
  */
 interface CustomizeRouteMeta {
   title?: string;
   subtitle?: string;
-  transition?: string;
+  transition?: Transition;
   hidden?: boolean;
   /* 头部类型 */
   headerType?: any;