From 41234e7e57f7586d4faa9db56952424d56327098 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Wed, 21 Feb 2024 18:17:57 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E5=BC=95=E5=85=A5=20anima?=
 =?UTF-8?q?te.css=20=E5=8A=A8=E7=94=BB=E5=BA=93=EF=BC=8C=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E7=9A=84=20transtion=20=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E5=8A=A8=E7=94=BB=E6=A0=B7=E5=BC=8F=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 +
 src/components/Breadcrumb/index.vue           | 18 ++---
 src/layout/components/AppMain/index.vue       |  2 +-
 .../Sidebar/components/SidebarLogo.vue        |  3 +-
 src/main.ts                                   |  1 +
 src/styles/index.scss                         |  1 -
 src/styles/transition.scss                    | 69 -------------------
 7 files changed, 11 insertions(+), 84 deletions(-)
 delete mode 100644 src/styles/transition.scss

diff --git a/package.json b/package.json
index 379a5985..3caa325a 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "@vueuse/core": "^10.7.2",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "5.1.10",
+    "animate.css": "^4.1.1",
     "axios": "^1.6.7",
     "echarts": "^5.5.0",
     "element-plus": "^2.5.6",
diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue
index a9a1e440..df9849d6 100644
--- a/src/components/Breadcrumb/index.vue
+++ b/src/components/Breadcrumb/index.vue
@@ -1,12 +1,14 @@
 <template>
-  <el-breadcrumb class="h-[50px] flex items-center">
-    <transition-group name="breadcrumb-transition">
+  <el-breadcrumb class="flex-y-center">
+    <transition-group
+      enter-active-class="animate__animated animate__fadeInRight"
+    >
       <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
         <span
           v-if="
             item.redirect === 'noredirect' || index === breadcrumbs.length - 1
           "
-          class="text-[var(--el-disabled-text-color)]"
+          class="color-gray-400"
           >{{ translateRouteTitle(item.meta.title) }}</span
         >
         <a v-else @click.prevent="handleLink(item)">
@@ -18,8 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, ref, watch } from "vue";
-import { useRoute, RouteLocationMatched } from "vue-router";
+import { RouteLocationMatched } from "vue-router";
 import { compile } from "path-to-regexp";
 import router from "@/router";
 import { translateRouteTitle } from "@/utils/i18n";
@@ -88,13 +89,6 @@ onBeforeMount(() => {
 </script>
 
 <style lang="scss" scoped>
-.app-breadcrumb.el-breadcrumb {
-  display: inline-block;
-  margin-left: 8px;
-  font-size: 14px;
-  line-height: 50px;
-}
-
 // 覆盖 element-plus 的样式
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {
diff --git a/src/layout/components/AppMain/index.vue b/src/layout/components/AppMain/index.vue
index 16280f70..5eb2a657 100644
--- a/src/layout/components/AppMain/index.vue
+++ b/src/layout/components/AppMain/index.vue
@@ -2,7 +2,7 @@
   <section class="app-main">
     <router-view>
       <template #default="{ Component, route }">
-        <transition name="fade-translate" mode="out-in">
+        <transition mode="out-in">
           <keep-alive :include="cachedViews">
             <component :is="Component" :key="route.path" />
           </keep-alive>
diff --git a/src/layout/components/Sidebar/components/SidebarLogo.vue b/src/layout/components/Sidebar/components/SidebarLogo.vue
index 49328f11..90fc081f 100644
--- a/src/layout/components/Sidebar/components/SidebarLogo.vue
+++ b/src/layout/components/Sidebar/components/SidebarLogo.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="logo-container">
-    <transition name="logo-transition">
+    <transition enter-active-class="animate__animated animate__fadeInLeft">
       <router-link v-if="collapse" class="wh-full flex-center" to="/">
         <img v-if="settingsStore.sidebarLogo" :src="logo" class="logo-image" />
       </router-link>
@@ -41,6 +41,7 @@ const logo = ref(new URL(`../../../../assets/logo.png`, import.meta.url).href);
   }
 
   .logo-title {
+    flex-shrink: 0; /* 防止容器在空间不足时缩小 */
     margin-left: 10px;
     font-size: 14px;
     font-weight: bold;
diff --git a/src/main.ts b/src/main.ts
index 05a90a1c..ca4b5976 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -18,6 +18,7 @@ import i18n from "@/lang/index";
 import "element-plus/theme-chalk/dark/css-vars.css";
 import "@/styles/index.scss";
 import "uno.css";
+import "animate.css";
 
 const app = createApp(App);
 // 全局注册 自定义指令(directive)
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 1e466bef..83ff8720 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,4 +1,3 @@
-@use "./transition";
 @use "./reset";
 
 .app-container {
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
deleted file mode 100644
index 58acc3bf..00000000
--- a/src/styles/transition.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-/* 淡入淡出 */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.28s;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* 平移和淡入淡出 */
-.fade-translate-enter-active,
-.fade-translate-leave-active {
-  transition: opacity 0.3s, transform 0.3s;
-}
-
-.fade-translate-enter-from,
-.fade-translate-leave-to {
-  opacity: 0;
-  transform: translateX(-30px);
-}
-
-/* 缩放 */
-.fade-scale-enter-active,
-.fade-scale-leave-active {
-  transition: transform 0.3s ease-in-out;
-}
-
-.fade-scale-enter-from,
-.fade-scale-leave-to {
-  transform: scale(0);
-}
-
-/* 旋转 */
-.fade-rotate-enter-active,
-.fade-rotate-leave-active {
-  transition: transform 0.3s ease-in-out;
-}
-
-.fade-rotate-enter-from,
-.fade-rotate-leave-to {
-  transform: rotate(90deg);
-}
-
-/* 面包屑 */
-.breadcrumb-transition-enter-active,
-.breadcrumb-transition-leave-active {
-  transition: all 0.5s;
-}
-
-.breadcrumb-transition-enter-from,
-.breadcrumb-transition-leave-to {
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-/* Logo动画 */
-
-// 进入动画，2s内过渡到完全不透明(opacity默认值为1，不需要显示声明)
-.logo-transition-enter-active {
-  transition: opacity 2s;
-}
-
-// 进入动画开始时和离开动画的样式状态(opacity)
-.logo-transition-enter-from,
-.logo-transition-leave-to {
-  opacity: 0;
-}