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

image.png
这是一个循环出来的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);
}
阅读 2.5k
3 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题