vue轮播图左右切换如何更优雅实现？

Question

<div class="slide-img">
      <a :href="slides[nowIndex].href">
        <transition v-if="left"
          name="slide-transright">
          <img v-if="isShow" :src="slides[nowIndex].src">
        </transition>
        <transition v-if="left"
          name="slide-transright-old">
          <img v-if="!isShow" :src="slides[nowIndex].src">
        </transition>

        <transition v-if="!left"
                    name="slide-transleft">
          <img v-if="isShow" :src="slides[nowIndex].src">
        </transition>
        <transition v-if="!left"
                    name="slide-transleft-old">
          <img v-if="!isShow" :src="slides[nowIndex].src">
        </transition>
      </a>
    </div>

vue

name里为动画效果,slide-transright为从右向左变化

isShow = true，
如果点击的index小于当前index,设置isShow为false，然后动画设置为slide-transleft从左向右变化
if (index < this.nowIndex) {
          this.left = false
        } else {
          this.left = true
        }

css

.slide-transright-enter-active {
    transition: all .5s;
  }

  .slide-transright-enter {
    transform: translateX(900px);
  }

  .slide-transright-old-leave-active {
    transition: all .5s;
    transform: translateX(-900px);
  }

  .slide-transleft-enter-active {
    transition: all .5s;
  }

  .slide-transleft-enter{
    transform: translateX(-900px);
  }

  .slide-transleft-old-leave-active {
    transition: all .5s;
    transform: translateX(900px);
  }

有没有改进的方法？HTML多了一层transition，name不能设置if语句来做动画修改啊

Answer 1

看看这里。https://cn.vuejs.org/v2/guide...列表过渡

Answer 2

这边有一个原生js封装的轻量的轮播图组件，性能和 使用起来都挺好的 你可以试试
https://github.com/zwhGithub/...