From bf932950d60ddb2a727f51d96c3e7c2306c97cd1 Mon Sep 17 00:00:00 2001
From: chenghx <chenghx@nfex.com>
Date: Mon, 3 Sep 2018 14:20:04 +0800
Subject: [PATCH] feat: add global page toggling animation

---
 src/App.vue                         | 13 ++++++++++++-
 src/components/layout/MenuView.vue  |  2 ++
 src/components/layout/PageView.vue  |  4 +++-
 src/components/layout/RouteView.vue |  2 ++
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1f70f06..b949aed 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,8 +19,8 @@ export default {
 </script>
 
 <style lang="less">
-  //拖拽控件全局样式
   :global{
+    //拖拽控件全局样式
     .dragable-ghost{
       border: 1px dashed #aaaaaa;
       opacity: 0.65;
@@ -33,5 +33,16 @@ export default {
       border: 1px dashed #aaaaaa;
       opacity: 0.65;
     }
+    //页面切换动画
+    .page-toggle-enter-active{
+      transition: all 0.2s ease-in 0.25s;
+    }
+    .page-toggle-leave-active{
+      transition: all 0.2s ease-out 0s;
+    }
+    .page-toggle-enter, .page-toggle-leave-to{
+      opacity: 0;
+      padding: 0px;
+    }
   }
 </style>
diff --git a/src/components/layout/MenuView.vue b/src/components/layout/MenuView.vue
index 45a9ee7..4dcbf91 100644
--- a/src/components/layout/MenuView.vue
+++ b/src/components/layout/MenuView.vue
@@ -1,6 +1,8 @@
 <template>
   <global-layout>
+    <transition name="page-toggle">
     <router-view />
+    </transition>
   </global-layout>
 </template>
 
diff --git a/src/components/layout/PageView.vue b/src/components/layout/PageView.vue
index b3ba313..8dd6545 100644
--- a/src/components/layout/PageView.vue
+++ b/src/components/layout/PageView.vue
@@ -3,7 +3,9 @@
     <div slot="extra" class="extraImg">
       <img :src="extraImage"/>
     </div>
-    <router-view  ref="page"/>
+    <transition name="page-toggle">
+      <router-view  ref="page"/>
+    </transition>
   </page-layout>
 </template>
 
diff --git a/src/components/layout/RouteView.vue b/src/components/layout/RouteView.vue
index 52adca1..ce6a6f6 100644
--- a/src/components/layout/RouteView.vue
+++ b/src/components/layout/RouteView.vue
@@ -1,5 +1,7 @@
 <template>
+  <transition name="page-toggle">
   <router-view />
+  </transition>
 </template>
 
 <script>