vuejs过渡和css关键帧反向过渡

如何解决vuejs过渡和css关键帧反向过渡

我已经用vuejs创建了一个滑块，并且我想在其中用vue transition class产生幻灯片效果。我要实现的目的是单击next按钮时，当前图像滑至底部，而上一张图像也滑至底部并占据当前图像位置。和prev按钮单击要撤消。我用CSS关键帧定义了此动画，但无法实现实际目标。我相信这是一个css关键帧黑客，无法弄清楚。

这是我的code snippet，您可以找到所有代码。我只是叠放在幻灯片动画上。

<template>
  <div id="app">
    <div class="slider-wrapper">
      <transition
        :name="direction == 'next' ? 'slideRightNextImg' : 'slideRightPrevImg'"
      >
        <div
          class="slide-img"
          v-for="(image,idx) in this.images"
          :key="idx"
          v-if="idx == activeIndex"
        >
          <img :src="image" alt="" />
        </div>
      </transition>
    </div>

    <button @click.prevent="toPrev()">Prev</button>
    <button @click.prevent="toNext()">Next</button>
  </div>
</template>

JavaScript代码

data() {
    return {
      activeIndex: 0,direction: null | String,images: [
        "https://s3-us-west-2.amazonaws.com/s.cdpn.io/20625/lordea-home-01-min.jpg","https://s3-us-west-2.amazonaws.com/s.cdpn.io/20625/lordea-home-02-min.jpg","https://s3-us-west-2.amazonaws.com/s.cdpn.io/20625/lordea-home-03-min.jpg","https://s3-us-west-2.amazonaws.com/s.cdpn.io/20625/lordea-home-04-min.jpg",],};
  },methods: {
    toNext: function () {
      const newSlide = this.activeIndex + 1;
      if (newSlide < this.images.length) {
        this.activeIndex = newSlide;
      }
      this.direction = "next";
    },toPrev: function () {
      const newSlide = this.activeIndex - 1;
      if (newSlide < this.images.length && newSlide >= 0) {
        this.activeIndex = newSlide;
      }
      this.direction = "prev";
    },},

用于过渡的CSS代码

.slider-wrapper {
  height: 60vh;
  width: 50%;
  overflow: hidden;
}

.slide-img {
  width: 100%;
  height: 100%;
  transition: transform 1.4s ease;
}

.slide-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

button {
  margin-top: 20px;
  margin-right: 10px;
}

.slideRightNextImg-enter-active {
  animation: next-leave 1.4s;
}
.slideRightNextImg-leave-active {
  animation: next-leave 1.4s;
}

.slideRightPrevImg-enter,.slideRightPrevImg-leave-to {
  animation: next-enter 1.4s;
}
.slideRightPrevImg-enter-active,.slideRightPrevImg-leave-active {
  animation: next-enter 1.4s reverse;
}

@keyframes next-enter {
  100% {
    transform: translateY(100%);
  }

  0% {
    transform: translateY(0%);
  }
}

@keyframes next-leave {
  0% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(100%);
  }
}

预先感谢。