vue动画transition

一、动画生命周期

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter
被移除)，在过渡/动画完成之后移除。
v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave
被删除)，在过渡/动画完成之后移除

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v-是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

v-enter-active 和v-leave-active 可以控制进入/离开过渡的不同的缓和曲线(ease ease-in ease-out liner)。

二、 应用场景-转场动画（淘宝、京东、拼多多）

图一:

图二:

图三:

 <transition :name="slideType">
      <keep-alive include="home">
        <router-view class="Router" />
      </keep-alive>
    </transition>
<script>
export default {
  name: "App",
  data() {
    return {
      slideType: "slide-left",
    };
  },
  watch: {
    $route(to, from) {
      console.log(to);
      if (to.name == "Detail" && from.name == "home") {
        this.slideType = "slide-left";
      } else if (to.name == "home" && from.name == "Detail") {
        this.slideType = "slide-right";
      } else {
        this.slideType = "";
      }
    },
  }
</script>
<style>
.Router {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.slide-left-enter {
  transform: translateX(100%);
  opacity: 0;
}
.slide-left-enter-to {
  opacity: 1;
}
.slide-left-leave {
  opacity: 1;
}
.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-100%);
}

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

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 1s l;
}
</style>