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中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
vue 动态生成拓扑图的示例
Jan 03 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
如何优化vue打包文件过大
Apr 13 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
Vue深入理解插槽slot的使用
Aug 05 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
Thinkphp3.2简单解决多文件上传只上传一张的问题
2017/09/26 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
JS面向对象编程浅析
2011/08/28 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
Python中的字典遍历备忘
2015/01/17 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
Python 的AES加密与解密实现
2019/07/09 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
信息管理员岗位职责
2013/12/01 职场文书
无故旷工检讨书
2014/01/26 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
校园广播稿100字
2014/10/06 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python