From df8a291d690261291eecf65583c69773dbd7edd1 Mon Sep 17 00:00:00 2001
From: haoxr <1490493387@qq.com>
Date: Tue, 21 Feb 2023 00:03:31 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=B7=BB=E5=8A=A0transition?=
 =?UTF-8?q?=E8=BF=87=E6=B8=A1=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: af5bcff1c673303101e9af9f2ee671640816ce8f
---
 src/layout/components/Sidebar/Logo.vue | 64 ++++++++++++++++----------
 1 file changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
index d4b3ff6b..864ab62c 100644
--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
 import { useSettingsStore } from '@/store/modules/settings';
 
 const settingsStore = useSettingsStore();
@@ -11,31 +10,48 @@ defineProps({
   }
 });
 
-const logo = ref<string>(
-  new URL(`../../../assets/logo.png`, import.meta.url).href
-);
+const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
 </script>
 
 <template>
-  <transition class="bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
-    <router-link
-      v-if="collapse"
-      key="collapse"
-      class="h-[50px] flex items-center justify-center"
-      to="/"
-    >
-      <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
-      <h1 v-else>vue3-element-admin</h1>
-    </router-link>
+  <div class="w-full h-[50px] bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
+    <transition name="sidebarLogoFade">
+      <router-link
+        v-if="collapse"
+        key="collapse"
+        class="h-full w-full flex items-center justify-center"
+        to="/"
+      >
+        <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
+        <span v-else class="ml-3 text-white text-sm font-bold"
+          >vue3-element-admin</span
+        >
+      </router-link>
 
-    <router-link
-      v-else
-      key="expand"
-      class="h-[50px] flex items-center justify-center"
-      to="/"
-    >
-      <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
-      <span class="ml-3 text-white text-sm font-bold">vue3-element-admin</span>
-    </router-link>
-  </transition>
+      <router-link
+        v-else
+        key="expand"
+        class="h-full w-full flex items-center justify-center"
+        to="/"
+      >
+        <img v-if="settingsStore.sidebarLogo" :src="logo" class="w-5 h-5" />
+        <span class="ml-3 text-white text-sm font-bold"
+          >vue3-element-admin</span
+        >
+      </router-link>
+    </transition>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+// https://cn.vuejs.org/guide/built-ins/transition.html#the-transition-component
+.sidebarLogoFade-enter-active {
+  transition: opacity 2s;
+}
+
+.sidebarLogoFade-leave-active,
+.sidebarLogoFade-enter-from,
+.sidebarLogoFade-leave-to {
+  opacity: 0;
+}
+</style>