diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index 85c032862a6105c5f6f8419d382700f11c787cae..04e1627945e8e28e2f37b689b7679ecca56238f3 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -11,7 +11,21 @@
   opacity: 0;
 }
 
-/*fade*/
+/*fade-transform*/
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/*breadcrumb transition*/
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
   transition: all .5s;
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
index 653d18104e7671ce4f9a039c7c77946424d214fe..8e10a9e5bc7e7095af4f7d7a4c977064bae8c880 100644
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="app-main" style="min-height: 100%">
-    <transition name="fade" mode="out-in">
+    <transition name="fade-transform" mode="out-in">
       <keep-alive :include="cachedViews">
         <router-view></router-view>
       </keep-alive>