diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index 5d7b636eaa431958fd2ab9598f46f86e33b3e182..85c032862a6105c5f6f8419d382700f11c787cae 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -1,4 +1,6 @@
 //globl transition css
+
+/*fade*/
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 0.28s;
@@ -8,3 +10,24 @@
 .fade-leave-active {
   opacity: 0;
 }
+
+/*fade*/
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
+
diff --git a/src/views/layout/components/Levelbar.vue b/src/views/layout/components/Levelbar.vue
index d452ca63f18bb6db76df1b5490e7fc2a9c4b36f0..4e392583a4bc3e2456efcf78474839164c792206 100644
--- a/src/views/layout/components/Levelbar.vue
+++ b/src/views/layout/components/Levelbar.vue
@@ -1,9 +1,11 @@
 <template>
   <el-breadcrumb class="app-levelbar" separator="/">
+   <transition-group name="breadcrumb">
     <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if='item.meta.title'>
       <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{generateTitle(item.meta.title)}}</span>
       <router-link v-else :to="item.redirect||item.path">{{generateTitle(item.meta.title)}}</router-link>
     </el-breadcrumb-item>
+     </transition-group>
   </el-breadcrumb>
 </template>