路由动画

src/App.vue

 <template>
   <div id="app">
-    <!-- <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div> -->
-    <keep-alive>
-      <router-view/>
-    </keep-alive>
-    
+    <transition :name="transitionName" >
+        <keep-alive>
+            <router-view class="child-view"/>
+        </keep-alive>
+    </transition>
+  
   </div>
 </template>
+<script>
+export default {
+  data() {
+    return {
+      transitionName: ''
+    }
+  },
+   watch: {
+    $route: function() {
+      let isBack = this.$router.isBack
+      if (isBack) {
+        this.transitionName = 'slide-right'
+        console.log('slide-right')
+      } else {
+        console.log('slide-right')
+        this.transitionName = 'slide-left'
+      }
+      // 做完回退动画后，要设置成前进动画，否则下次打开页面动画将还是回退
+      this.$router.isBack = false
+    }
+  },
+  created () {
+    // var self = this
+    if (window.history && window.history.pushState) {
+      history.pushState(null, null, document.URL)
+      window.addEventListener(
+        'popstate', () => {
+          console.log('popstate')
+          this.$router.isBack = true
+        },
+        false
+      )
+    }
+  }
+}
+</script>
 
 <style lang="scss">
 #app {
@@ -29,4 +63,34 @@
     }
   }
 }
+.child-view {
+  transition: all 0.4s cubic-bezier(0.55, 0, 0.1, 1);
+  -webkit-overflow-scrolling: touch;
+}
+.slide-left-enter,
+.slide-right-leave-active {
+  opacity: 0;
+  -webkit-transform: translate(250px, 0);
+  transform: translate(250px, 0);
+}
+.slide-left-leave-to {
+  opacity: 0;
+  -webkit-transform: translate(-50px, 0);
+  transform: translate(-50px, 0);
+}
+.slide-left-leave-active,
+.slide-right-enter {
+  opacity: 0;
+  -webkit-transform: translate(-250px, 0);
+  transform: translate(-250px, 0);
+}
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s !important;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  transition: opacity 0.3s !important;
+  /* opacity: 0 !important; */
+}
+
 </style>

src/views/groups/index.vue

@@ -112,6 +112,7 @@ export default {
     .clear-btn {
       width:133px;
       height:44px;
+      font-size:20px;
       margin:  0 auto;
       line-height: 44px;
       text-align: center;

src/views/layout/navbar.vue

@@ -3,7 +3,7 @@
   @click-left="myonClickLeft"
   @click-right="onClickRight">
     <div slot="right" >
-      <van-icon v-show="showNotice" @click="goNotice" name="chat-o" size="25"  />
+      <van-icon v-show="showNotice" @click="goNotice" name="chat-o" class="message-icon"  />
       <slot></slot>
     </div>
   </van-nav-bar>
@@ -56,4 +56,7 @@ export default {
 .van-nav-bar__title {
   font-size: 22px;
 }
+.message-icon {
+  font-size: 25px;
+}
 </style>