From a91f687c2dcb9add0861943c910d739c8d515e66 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 28 Aug 2018 18:30:36 +0800
Subject: [PATCH] perf[css]: refine fade-transform

---
 src/styles/transition.scss              | 14 ++++++++++++++
 src/views/layout/components/AppMain.vue |  3 ++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index c4d47ad..8dd9b04 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -11,6 +11,20 @@
   opacity: 0;
 }
 
+/*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);
+}
+
 /*fade*/
 .breadcrumb-enter-active,
 .breadcrumb-leave-active {
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
index 7f83200..8b46239 100644
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -1,6 +1,7 @@
 <template>
   <section class="app-main">
-    <transition name="fade" mode="out-in">
+    <transition name="fade-transform" mode="out-in">
+      <!-- or name="fade" -->
       <!-- <router-view :key="key"></router-view> -->
       <router-view/>
     </transition>