视图打开动画

APP/src/App.vue.ftl

@@ -13,12 +13,14 @@ TARGET=PSSYSAPP
         <keep-alive>
             <router-view v-if="$route.meta.keepAlive"></router-view>
         </keep-alive>
-        <router-view v-if="!$route.meta.keepAlive"></router-view>
+        <transition :name="fold" >
+            <router-view v-if="!$route.meta.keepAlive"></router-view>
+        </transition>
 	</ion-app>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Watch } from "vue-property-decorator";
 
 @Component({})
 export default class App extends Vue { 
@@ -71,6 +73,34 @@ export default class App extends Vue {
         }
 	}
 
+  	/**
+     * 视图条数
+     *
+     * @memberof App
+     */
+    public viewCount = 0;
+
+    /**
+     * 动画
+     *
+     * @memberof App
+     */
+    get fold(){
+        return this.$router.app.$store.state.pageTagList.length > this.viewCount?'fold-left':'fold-right'
+    }
+
+    /**
+     * 监听路由
+     *
+     * @memberof App
+     */
+    @Watch("$route")
+        routeChange(to:any, from:any){
+        setTimeout(() => {
+            this.viewCount = this.$router.app.$store.state.pageTagList.length;
+        }, 1000);
+    }
+
     /**
      * 设置第三方应用
      *
@@ -94,4 +124,82 @@ export default class App extends Vue {
         this.setThirdPartyPath();
     }
 }
-</script>
\ No newline at end of file
+</script>
+<style>
+.fold-left-enter-active {
+    animation-name: fold-left-in;
+    animation-duration: .3s;
+  }
+  .fold-left-leave-active {
+    animation-name: fold-left-out;
+    animation-duration: .3s;
+  }
+  @keyframes fold-left-in {
+    0% {
+      -webkit-transform: translate3d(100%, 0, 0);
+      transform: translate3d(100%, 0, 0);
+      /* visibility: visible; */
+    }
+    /*50% {
+      transform: translate3d(50%, 0, 0);
+    }*/
+    100% {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  @keyframes fold-left-out {
+    0% {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
+    /*50% {
+      transform: translate3d(-50%, 0 , 0);
+    }*/
+    100% {
+      -webkit-transform: translate3d(-100%, 0, 0);
+      transform: translate3d(-100%, 0, 0);
+      /* visibility: hidden; */
+    }
+  }
+  .fold-right-enter-active {
+    animation-name: fold-right-in;
+    animation-duration: .3s;
+  }
+  .fold-right-leave-active {
+    animation-name: fold-right-out;
+    animation-duration: .3s;
+  }
+  @keyframes fold-right-in{
+    0% {
+      width: 100%;
+      -webkit-transform: translate3d(-100%, 0, 0);
+      transform: translate3d(-100%, 0, 0);
+      /* visibility: visible; */
+    }
+    /*50% {
+      transform: translate3d(50%, 0, 0);
+    }*/
+    100% {
+      width: 100%;
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  @keyframes fold-right-out  {
+    0% {
+      width: 100%;
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
+    /*50% {
+      transform: translate3d(-50%, 0 , 0);
+    }*/
+    100% {
+      width: 100%;
+      -webkit-transform: translate3d(100%, 0, 0);
+      transform: translate3d(100%, 0, 0);
+      /* visibility: hidden; */
+    }
+  }
+</style>
\ No newline at end of file