Vue实现一种简单的无限循环滚动动画的示例

网络编程 2024/11/21 佚名

3 2 1

无为清净楼资源网 Design By www.qnjia.com

本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例，分享给大家，具体如下：

先看实现效果：

这种类似轮播的效果，通常可以使用轮播的方案解决，只不过相对于我要分享的方案来说，轮播实现还是要复杂些的。
Vue提供了一种过渡动画transition-group，这里我便是利用的这个效果

// template
<transition-group name="list-complete" tag="div">
 <div
  v-for="v in items"
  :key="v.ix"
  class="item list-complete-item pro-panel"
  :style="{ height: sh }"
 >
  // 内容部分 
 </div>
</transition-group>

//scss
.list-complete-item {
 transition: all 1s;
}
.list-complete-leave-to {
 opacity: 0;
 transform: translateY(-80px);
}
.list-complete-leave-active {
 position: absolute;
}

这样，动画效果就出来了，但是却不能自动执行，所以我利用了setInterval：

mounted() {
 let count = 4000
 if (!this.timer) {
  this.timer = setInterval(() => {
   if (this.items.length > 1) {
    this.remove()
    this.$nextTick().then(() => {
     this.add()
    })
   }
  }, count)
 }
},
methods: {
 add: function() {
  if (this.items && this.items.length) {
   const item = { ...this.removeitem[0] }
   item.ix = this.nextNum++
   this.items.push(item)
  }
 },
 remove: function() {
  this.removeitem = this.items.splice(0, 1)
 }
}

如比，效果得以实现，是不是更简单点。顺带提一下，我这边实现的效果是单条滚动，就像新闻滚动那样，所以视图窗口只能看到一条数据，你也可以不这样限制，那么就能显示整个列表了，不过每次还是只有单条数据的消失效果。

PS：动态渲染图片可以使用这种方式

<img
 :src="/UploadFiles/2021-04-02/${somevar}.png`)">

当然，如果有不同的意见，欢迎留言交流！

Vue,无限滚动动画,Vue,无限循环滚动动画

标签：

Vue,无限滚动动画,Vue,无限循环滚动动画

无为清净楼资源网 Design By www.qnjia.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

无为清净楼资源网 Design By www.qnjia.com

评论“Vue实现一种简单的无限循环滚动动画的示例”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月21日

Vue实现一种简单的无限循环滚动动画的示例

Vue,无限滚动动画,Vue,无限循环滚动动画

Vuex实现简单购物车

基于vuex实现购物车功能

评论“Vue实现一种简单的无限循环滚动动画的示例”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接