APP embedded H5 page switching animation

<template>
  <div id="app"> <! -- <loading ref="loading"></loading> -->
    <div class="app-main" @touchend="touchEnd" @touchstart="touchStart">
      <transition :name="moveName" mode="in-out">
        <keep-alive>
            <router-view  class="child-view"></router-view>
        </keep-alive>
      </transition >
    </div>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      isTransition: true,
      moveName: 'slide-left',
      transitionFlag: false,
    }
  },
  watch: {
    $route(to, from) {
      if(! from.name) { this.moveName =' '
      }
      if (to.meta.grade > from.meta.grade) {
        this.moveName = this.transitionFlag ? 'slide-left' : ' '
      } else {
        this.moveName = this.transitionFlag ? 'slide-right' : ' 'TouchStart (e) {this.transitionFlag =false; }, // Touch away, check if you can swipe right, if not, open animation touchEnd(e) {if(e.changedTouches[0].clientX < 0) {
        this.transitionFlag = false
      } else {
        this.transitionFlag = true
      }
    }
  }
}
</script>
<style lang="less"scoped> .app-main{ width: 100%; height: 100%; } .child-view { width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; margin: 0 auto; overflow-y: auto; overflow-x: hidden; } // Slide -right-enter-active,. Slide -right-leave-active,. Slide -left-enter-active, .slide-left-leave-active { height: 100%; will-change: transform; transition: all .3s ease; position: fixed; top: 0; bottom: 0; transform-style: preserve-3d; backface-visibility: hidden; perspective: 1000; } .slide-right-enter { transform: translate3d(-100%, 0, 0); } .slide-right-leave-active { transform: translate3d(100%, 0, 0); } .slide-left-enter { transform: translate3d(100%, 0, 0); } .slide-left-leave-active { transform: translate3d(-100%, 0, 0); } </style>Copy the code