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


Posted in Vue.js onJanuary 10, 2021

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

先看实现效果:

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="require(`@/assets/imgs/icons/${somevar}.png`)"
>

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

到此这篇关于Vue实现一种简单的无限循环滚动动画的示例的文章就介绍到这了,更多相关Vue 无限滚动动画内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Vue.js 相关文章推荐
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
vue实现在data里引入相对路径
Jun 05 Vue.js
基于vuex实现购物车功能
Jan 10 #Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 #Vue.js
vue编写简单的购物车功能
Jan 08 #Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 #Vue.js
vuex的使用和简易实现
Jan 07 #Vue.js
vue watch监控对象的简单方法示例
Jan 07 #Vue.js
You might like
PHP 面向对象 final类与final方法
2010/05/05 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python类和继承用法实例
2015/07/07 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
对numpy中shape的深入理解
2018/06/15 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
揠苗助长教学反思
2014/02/04 职场文书
教师考核材料
2014/05/21 职场文书
地震捐款倡议书
2014/08/29 职场文书
单位作风建设自查报告
2014/10/23 职场文书
写给孩子的新学期寄语
2015/02/27 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
小学生暑假安全公约
2015/07/14 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书