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

先看实现效果:

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

// template

 
		
// 内容部分
//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:动态渲染图片可以使用这种方式

 

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

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

Vue实现一种简单的无限循环滚动动画的示例的更多相关文章

  1. Vue中引入svg图标的两种方式

    Vue中引入svg图标的方式Vue中引入svg图标的方式一安装yarn add svg-sprite-loader ......

  2. vue element和nuxt的使用技巧分享

    1.element的时间选择提交的格式转化例如Fri Sep 07 2018 00:00:00 GMT+0800 (......

  3. vue 递归组件的简单使用示例

    前言递归 相信很多同学已经不陌生了,算法中我们经常用递归来解决问题。比如经典的:从一个全为数字的数组中找出其中相加能......

  4. vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能

    一、准备工作下载vue-quill-editornpm install vue-quill-editor --sav......

  5. vue实现一个获取按键展示快捷键效果的Input组件

    遇到一个需求,页面内要自定义快捷键,这就需要可以有地方设置和展示快捷键,找了一圈Element UI发现没有能稍微改......

  6. vue 页面跳转的实现方式

    一、this.$router.push()1、vue点击跳转4 2、script//跳转前页面传参数:goTo(it......

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

    本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例,分享给大家,具体如下:先看实现效果:这种类似轮播的效果,通......

  8. 深入解析vue响应式原理

    摘要:本文主要通过结合vue官方文档及源码,对vue响应式原理进行深入分析。1.定义作为vue最独特的特性,响应式可......

随机推荐

  1. Android非异常情况下的Activity生命周期分析

    Activity非异常情况下的生命周期是指,用户正常参与UI交互的情况下,Activity所经过的生命周期的改变;一......

  2. Perl 的 Socket 客户端获取服务器时间

    #!/usr/local/bin/perl -Twrequire 5.6.0;use Socket;use File......

  3. Python学习(9)(元组、定义、常用操作、循环遍历、应用场景、元组与列表的转换)

    Python学习(9)一、python的元组 定义二、python的元组 常用操作三、python 元组的循环遍历四......

  4. 如何用python写个模板引擎

    一.实现思路本文讲解如何使用python实现一个简单的模板引擎, 支持传入变量, 使用if判断和for循环语句, 最......

  5. 原生JavaScript实现轮播图

    本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下效果:代码:* {margin......

  6. 详解如何使用Pytest进行自动化测试

    为什么需要自动化测试自动化测试有很多优点,但这里有3个主要的点可重用性:不需要总是编写新的脚本,除非必要,即使是新的......

  7. Nginx中break与last的区别详析

    先说区别last,重写后的规则,会继续用重写后的值去匹配下面的location。break,重写后的规则,不会去匹配......

  8. java 最新Xss攻击与防护(全方位360°详解)

    前沿XSS防范属于前端还是后端的责任 ?XSS 防范是后端 RD(研发人员)的责任,后端 RD 应该在所有用户提交数......

  9. 使用CSS的clip-path实现图片剪切效果

    最近有个业务需求:校对图片文本信息,如下图所示,当鼠标点击文本中某一行的时候,文本上会显示对应行图片同时左侧会显示对......

  10. Python 实现进度条的六种方式

    一、普通进度条示例代码import sysimport timedef progress_bar():for i i......