Vue常见过度动画

从右向左滑动

<transition name="slide">
      <router-view></router-view>
 </transition>
.slide-enter-active,
.slide-leave-active {
  transition: all 1s;
}
.slide-enter,
.slide-leave-to {
  transform: translate3d(100%, 0, 0);
}

从左向右

<transition name="moveL">

</transition>

<style lang="scss">

     .moveL-enter-active,
     .moveL-leave-active {
         transition: all 0.3s linear;
         transform: translateX(0%);
     }
    .moveL-enter,
    .moveL-leave {
        transform: translateX(-100%);
    }
    .moveL-leave-to {
        transform: translateX(-100%);
    }
</style>