vue轮播图如何才能从最后一张到假的第一张再跳到真的第一张自然过渡呢？

Question

<template lang="html">
  <div class="z-carrousel-container" :style="{width: width + 'px',height: height + 'px'}">
    <ul :style="{width: width * lis.length + 'px',transform: 'translateX(' + offsetX + 'px)'}" :class="{active: isActive}"><li v-for="li in lis" :style="{width: width + 'px',height: height + 'px'}"><img :src="li.link"  :style="{width: width + 'px',height: height + 'px'}" /></li></ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lis: [
        {link: "static/01.jpg"},
        {link: "static/02.jpeg"},
        {link: "static/03.jpg"}
      ],
      width: 400,
      height: 300,
      offsetX: '',
      isActive: true,
      autoplayTimer: ''
    }
  },
  mounted() {
    this.offsetX = -this.width
    this.lis.unshift(this.lis[this.lis.length - 1])
    this.lis.push(this.lis[1])

    this.autoplay()
  },
  methods: {
    nextImg: function() {
      this.offsetX = this.offsetX - this.width
      if (this.offsetX == -this.width * this.lis.length) {
        this.isActive = false
        this.offsetX = -this.width

        this.isActive = true
      }
    },
    autoplay: function() {
      this.autoplayTimer = setInterval(this.nextImg, 2000)
    }
  }
};
</script>

<style lang="css" scoped>
  .z-carrousel-container {
    overflow: hidden;
    position: relative;
  }
  .z-carrousel-container>ul {
    position: absolute;
  }
  .z-carrousel-container>ul.active {
    transition: transform .5s ease;
  }
  .z-carrousel-container>ul.closeTransition {
    transition-duration: 0s;
  }
  .z-carrousel-container>ul>li {
    float: left;
    list-style: none;
  }
</style>

动画效果也没有被关闭，从vue-devtools也能看出，只有translateX会变，transition却没被关闭。

Answer 1

逻辑就是把第一张拷贝一份放最后，当展示最后一张，动画结束，this.offsetX 设置为刚开始第一张的位置。
看看动画时间是不是很明显的比较快，自己把握移出定时，添加定时的时间。

Answer 2

补充楼上，还得把最后一张拷贝一份放最前面

Answer 3

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