APP内嵌h5页面切换动画

<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' : ''
      }
    }
  },
  methods: {
    // 触摸开始，关闭动画
    touchStart(e) {
      this.transitionFlag = false;
    },
    // 触摸离开， 判断是否右滑，不是的话打开动画
    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>