vue图片轮播（一）

这种用CSS transition 做的轮播动画，我不确定能不能做到拖拽的效果。

<template>
  <div class="hello">
    <div class='imgtransdiv'>
      <transition name="slide-trans">
          <img v-if="isShow" :src="slides[nowIndex].src">
      </transition>
      <transition name="slide-trans-old">
          <img v-if="!isShow" :src="slides[nowIndex].src">
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      nowIndex: 0,
      isShow: true,
      slides: [
        {
          src: require('../assets/logo.png')
        },
        {
          src: require('../assets/20190726150130.png')
        }
      ]
    }
  },
  mounted () {
    setInterval(() => {
      this.isShow = false
      setTimeout(() => {
        if (this.nowIndex === 1) {
          this.nowIndex = 0
        } else {
          this.nowIndex += 1
        }
        this.isShow = true
      }, 0)
    }, 1000)
  }
}
</script>
<style scoped>
  .slide-trans-enter-active {
    transition: all .5s;
  }
  .slide-trans-enter {
    transform: translateX(400px);
  }
  .slide-trans-old-leave-active {
    transition: all .5s;
    transform: translateX(-400px);
  }
.imgtransdiv{
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: relative;
}
.imgtransdiv img{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>