[fixed] page animation

src/App.vue

@@ -45,8 +45,10 @@ export default {
     $route(to, from) {
       const lastPath = this.history[this.history.length - 1] || {},
         { isReplace, isBack } = this.$router;
-
-      if (lastPath.path === to.path) {
+      console.log(to.meta.idx , from.meta.idx);
+      if (to.meta.idx && from.meta.idx) {
+        this.transitionName = to.meta.idx > from.meta.idx ? "fold-left" : "fold-right";
+      } else if (lastPath.path === to.path) {
         this.transitionName = "fold-right";
         this.history.pop();
       } else {
@@ -66,7 +68,7 @@ export default {
       this.$router.isBack = false;
       this.$router.isReplace = false;
 
-      console.log(this.transitionName, "change");
+      // console.log(this.transitionName, "change");
     }
   },
   mounted: function() {
@@ -102,12 +104,12 @@ export default {
 
 .fold-left-enter-active {
   animation-name: fold-left-in;
-  animation-duration: 0.5s;
+  animation-duration: 0.3s;
 }
 
 .fold-left-leave-active {
   animation-name: fold-left-out;
-  animation-duration: 0.5s;
+  animation-duration: 0.3s;
 }
 
 @keyframes fold-left-in {