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实现下载文件流完整前后端代码
Nov 17 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
php防止sql注入代码实例
2013/12/18 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
php compact 通过变量创建数组
2016/11/15 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python基于回溯法子集树模板解决找零问题示例
2017/09/11 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
基于python绘制科赫雪花
2018/06/22 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python爬虫与反爬虫大战
2020/07/30 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
中学校园广播稿
2015/08/18 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS