diff --git a/src/layout/components/sidebar/breadCrumb.vue b/src/layout/components/sidebar/breadCrumb.vue
index a42cf7f87..242530b17 100644
--- a/src/layout/components/sidebar/breadCrumb.vue
+++ b/src/layout/components/sidebar/breadCrumb.vue
@@ -97,8 +97,12 @@ watch(
 
 <template>
   <el-breadcrumb class="!leading-[50px] select-none" separator="/">
-    <transition-group appear name="breadcrumb">
-      <el-breadcrumb-item v-for="item in levelList" :key="item.path">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item
+        class="!inline !items-stretch"
+        v-for="item in levelList"
+        :key="item.path"
+      >
         <a @click.prevent="handleLink(item)">
           {{ transformI18n(item.meta.title) }}
         </a>
diff --git a/src/style/transition.scss b/src/style/transition.scss
index 257d441bc..fa69250ad 100644
--- a/src/style/transition.scss
+++ b/src/style/transition.scss
@@ -26,9 +26,12 @@
 }
 
 /* breadcrumb transition */
-.breadcrumb-enter-active,
+.breadcrumb-enter-active {
+  transition: all 0.4s;
+}
+
 .breadcrumb-leave-active {
-  transition: all 0.5s;
+  transition: all 0.3s;
 }
 
 .breadcrumb-enter-from,