feat: 面包屑动画

src/layout/components/Header/components/Breadcrumb/index.vue

@@ -2,7 +2,7 @@
   <div>
     <a-space direction="vertical">
       <a-breadcrumb>
-        <a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="item.path">
+        <a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="item.path" :class="transition">
           <span v-if="index === breadcrumb.length - 1" class="main_button">{{ $t(`language.${item?.meta?.title || ""}`) }}</span>
           <span v-else class="route_button" @click="onBreadcrumb(item as RouteLocationMatched)">{{
             $t(`language.${item?.meta?.title || ""}`)
@@ -15,6 +15,11 @@
 
 <script setup lang="ts">
 import { RouteLocationMatched } from "vue-router";
+import { storeToRefs } from "pinia";
+import { useThemeConfig } from "@/store/modules/theme-config";
+
+const themeStore = useThemeConfig();
+const { transitionPage } = storeToRefs(themeStore);
 const route = useRoute();
 const router = useRouter();
 
@@ -37,6 +42,11 @@ const breadcrumb = computed(() => {
   });
 });
 
+// 页面过渡
+const transition = computed(() => {
+  return transitionPage.value === "fadeInOut" ? "fadeInOut-enter-active" : "cardInOut-enter-active";
+});
+
 // 面包屑跳转
 const onBreadcrumb = (route: RouteLocationMatched) => {
   let path = route.redirect ? route.redirect : route.path;