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 25 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
vue实现登录功能
Dec 31 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
VUE解决跨域问题Access to XMLHttpRequest at
May 06 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
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
javascript中的有名函数和无名函数
2007/10/17 Javascript
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
js获取图片长和宽度的代码
2009/11/24 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python脚本生成caffe train_list.txt的方法
2018/04/27 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Django异步任务线程池实现原理
2019/12/17 Python
python爬虫如何解决图片验证码
2021/02/14 Python
详解webapp页面滚动卡顿的解决办法
2018/12/26 HTML / CSS
荷兰家电销售网站:Welhof
2020/12/08 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android