怎样平滑的轮播而不是生硬地切换

Question

这是一个循环出来的ul 让每一个li平滑的轮播，而不是生硬的切换

      <ul>
        <li v-for="(item,index) in giftList" :key="index" :class="{ 'carousel-animated1':isAnimated1 }">
          <img :src="item.gift_image" alt="">
          <button>{{item.gift_title}}</button>
        </li>
      </ul>

控制器

methods:{
 scroll1 () {
  // 开启动画
  this.isAnimated1 = true
  // 倒计时动画时间
  setTimeout(() => {
    // 将数组第一个元素添加到数组尾部
    this.giftList.push(this.giftList[0])
    // 移除数组第一个元素
    this.giftList.shift()
    // 关闭动画
    this.isAnimated1 = false
    // 动画时间需要与 .carousel-animated 中设置的时间一致
  }, 2000)
 },
}
mounted () {
 // 开启定时器
 setInterval(this.scroll1, 2000)
}

下面是carousel-animated1

.carousel-animated1 {
  transition: transform 2s;
  transform: translateX(-2.2rem);
}

Answer 1

用纯css无缝滚动 就能实现你的需求

Answer 2

flip技术可能会帮助到你
https://css-tricks.com/animat...
video: https://www.youtube.com/watch...
官方教程: https://vuejs.org/v2/guide/tr...

Answer 3

我以前写的轮播图实现原理:
https://github.com/Grewer/JsD...