vue移动端实现手机左右滑动入场动画

<template>
  <div id="app">
    <transition :name="transitonname">
      <router-view class="Router" />
    </transition>
  </div>
</template>

<style lang="less">
#app {
  min-height: 100%;
  background-color: #efefef;
}
html,
body {
  height: 100%;
}
body {
  font-size: 0.14rem;
}
html {
  font-size: 100px;
}

.Router {
  width: 100%;
  height: 100%;
}

// 事件动画
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}

.slide-right-enter {
  opacity: 0;
  transform: translateX(-100%);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-enter {
  opacity: 0;
  transform: translateX(100%);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translateX(-100%);
}
</style>

<script>
export default {
  data() {
    return {
      transitonname: "slide-left",
    };
  },
  watch: {
    // to from 代表 前进的路由和后退的路由
    $route(to, from) {
      // 假如是返回,则执行slide-right
      // console.log(to, from);
      if (this.$router.isBack == true) {
        // 加载返回动画
        this.transitonname = "slide-right";
        // 重置为不返回
        this.$router.isBack = false;
      } else {
        this.transitonname = "slide-left";
      }
    },
  },
};
</script>

返回事件

back () {
 this.$router.go(-1)
 this.$router.isBack = true
}