加上转场动画

src/style/index.scss

@@ -6,6 +6,7 @@
 @mixin t-center {
   text-align: center;
 }
+
 * {
   margin: 0;
   padding: 0;
@@ -596,6 +597,11 @@ a.media-box {
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both
 }
+.animated-slow {
+  animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both
+}
 
 @keyframes slideInUp {
   0% {
@@ -608,3 +614,69 @@ a.media-box {
     transform: translate3d(0, 0, 0)
   }
 }
+
+@keyframes slideOutRight {
+  from {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.slideOutRight {
+  -webkit-animation-name: slideOutRight;
+  animation-name: slideOutRight;
+}
+
+@keyframes slideInRight {
+  from {
+    -webkit-transform: translate3d(100%, 0, 0);
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+
+  to {
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.slideInRight {
+  -webkit-animation-name: slideInRight;
+  animation-name: slideInRight;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn;
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  -webkit-animation-name: fadeOut;
+  animation-name: fadeOut;
+}

src/views/App.vue

@@ -1,7 +1,19 @@
 <template lang="html">
   <div id="application">
+    <transition :enter-active-class="transactionEnterLiveName"
+                :leave-active-class="transactionLeaveLiveName"
+    >
     <router-view></router-view>
+    </transition>
   </div>
 </template>
 <script>
+  export default {
+    data(){
+      return {
+        transactionEnterLiveName:"animated-slow fadeIn",
+        transactionLeaveLiveName:"animated-slow fadeOut",
+      }
+  }
+  }
 </script>