中奖人js滚动效果_js使用transition效果实现无缝滚动

dc5524aa407bfa64a9fac7c3890408fe.png

作者:李大雷

出自:SegmentFault 思否

原文:segmentfault.com/a/1190000023945464


前言

无缝轮播一直是面试的热门题目,而大部分答案都是复制第一张到最后。诚然,这种方法是非常标准,那么有没有另类一点的方法呢?

第一种方法是需要把所有图片一张张摆好,然后慢慢移动的,

但是我能不能直接不摆就硬移动呢?

如果你使用过vue的transition,我们是可以通过给每一张图片来添加入场动画和离场动画来模拟这个移动

  • 进场动画就是从最右侧到屏幕中央
  • 出场动画是从屏幕中央到左侧移出

这样看起来的效果就是图片从右边一直往左移动,但是这个不一样的地方是,我们每一个元素都有这个进场动画和离场动画,我们根本不用关心它是第几个元素,你只管轮播就是。

如果不用vue呢?

很简单,我们自己实现一个transtition的效果就好啦,主要做的是以下两点

  • 元素显示的时候,即display属性不为none的时候,添加xx-enter-active动画
  • 元素消失的时候,先添加动画xx-leave-active, 注意要让动画播完才消失
function hide(el){el.className = el.className.replace(' slide-enter-active','')el.className += ' slide-leave-active'el.addEventListener('animationend',animationEvent)}function animationEvent(e){e.target.className = e.target.className.replace(' slide-leave-active','')e.target.style.display = 'none'e.target.removeEventListener('animationend',animationEvent)}function show(el){el.style.display = 'flex'el.className += ' slide-enter-active'}

这里我们使用了animationend来监听动画结束,注意这里每次从新添加类的时候需要重新添加监听器,不然会无法监听。如果不使用这个方法你可以使用定时器的方式来移除leave-active类。

function hide(el){el.className = el.className.replace(' slide-enter-active','')el.className += ' slide-leave-active'setTimeout(()=>{//动画结束后清除classel.className = el.className.replace(' slide-leave-active','')el.style.display = 'none'}, ANIMATION_TIME) //这个ANIMATION_TIME为你在css中动画执行的时间}

那么,动画怎么写呢?

.slide-enter-active{position: absolute;animation: slideIn ease .5s forwards;}.slide-leave-active{position: absolute;animation: slideOut ease .5s forwards;}@keyframes slideIn {0%{transform: translateX(100%);}100%{transform: translateX(0);}}@keyframes slideOut {0%{transform: translateX(0);}100%{transform: translateX(-100%);}}

需要注意的是这里的 forwards属性,这个属性表示你的元素状态将保持动画后的状态,如果不设置的话,动画跑完一遍,你的元素本来执行了离开动画,执行完以后会回来中央位置杵着。这个时候你会问了,上面的代码不是写了,动画执行完就隐藏元素吗?

如果你使用上面的setTimeout来命令元素执行完动画后消失,那么可能会有一瞬间的闪烁,因为实际业务中,你的代码可能比较复杂,setTimeout没法在那么精准的时间内执行。保险起见,就让元素保持动画离开的最后状态,即translateX(-100%)。此时元素已经在屏幕外了,不用关心它的表现了

轮播逻辑怎么写?

很简单,我们进一个新元素的时候同时移除旧元素即可,两者同时执行进场和离场动画即可。

function autoPlay(){setTimeout(()=>{toggleShow(新元素, 旧元素)this.autoPlay()},DURATION) //DURATION为动画间隔时间}function toggleShow(newE,oldE){//旧ele和新ele同时动画hide(oldE)show(newE)}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/505291.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络 --- 应用层

应用层概述 应用层对应用程序的通信提供服务。 应用层协议定义: 应用进程交换的报文类型,请求还是响应各种报文类型的语法,如报文中的各个字段及其详细描述字段的语义,即包含在字段中的信息的含义进程何时,如何发送…

opencv机器学习线性回归_Python机器学习之?线性回归入门(二)

线性回归原理介绍文章目录机器学习分类线性回归原理线性回归定义线性回归背后矩阵运算机器学习分类机器学习的主要任务便是聚焦于两个问题:分类和回归分类相信大家都不会陌生,生活中会见到很多的应用,比如垃圾邮件识别、信用卡发放等等&#…

php 邮件发送是html 没样式_使用python发送邮件

发送邮件这个功能非常实用,比如你写了一个爬虫,可以通过邮件来接收程序异常或者任务完成的通知,再比如你搭了一个网站,别人只需留下他的邮箱,你就可以自动给他发送邮件。总之我觉得邮件通知非常适合那些处理批量、大量…

cyber atomic hash map

整体结构 cyber atomic hash map是用一个数组存储桶(bucket),桶是一个链表的形式存储值,每一个结点是个entry,哈希冲突的解决方法是链地址法。 整体结构 --- entry entry为bucket链表的结点单位,代码&am…

easypoi设置黑色边框_迷人的G-SHOCK MTG-B1000XBD,碳纤维与黑色金属的魅力

美国最大的奢侈腕表盛会,第五届纽约WatchTime于2019年10月25日至26日在曼哈顿中城的Gotham Hall举行,共有37个参展品牌展出了最新的腕表款式,卡西欧(Casio)在G-SHOCK高级系列MT-G中展示了最新作品“ MTG-B1000XBD”和“ MTG-B1000…

python创建空字典_Python创建和访问字典

>>> dict1 {a:1,b:2,c:3,d:4} >>> print(a的值是:,dict1[a]) a的值是: 1 >>> dict4 dict(我 快乐, 你 伤悲) SyntaxError: keyword cant be an expression >>> dict4[你] 改变悲伤 >>> dict4 {我: 快乐, 你: 改变悲伤} >…

c语言 单词变复数_【热点】浅谈 :怎样学好C语言?

是新朋友吗?记得先点蓝字关注我哦~本文共 1900 字,预计阅读时间: 7 分钟。最近有好多朋友和我抱怨说C语言真的太难学了,你有没有什么好的意见?嗯,的确如此,我上个学期学C语言的时候也…

python库路径_如何设置本地python库目录/ PYTHONPATH?

在尝试编写今天使用PIL的 Python脚本的过程中,我发现我似乎没有在我的本地计算机上使用它(OS X 10.5.8,默认2.5 Python安装). 所以我跑: easy_install --prefix/usr/local/python/ pil 它有点抱怨/usr/local/python/lib/python2.5/site-packages尚未存在,所以我创建…

安川机器人报错代码_今日 IPO|对标库卡机器人的先惠技术上市 近八成收入靠上汽...

面对全球金融体系的重构,与中国资本市场的变革。「晚点」希望从小处入手,以每日 IPO 公司的快速报道,记录这个时代的变化。通过「晚点早知道」,我们希望可以让读者只需要花几分钟时间,就可以了解到当天上市公司里&…

htmlplay前端编辑器下载_2019年最好用的代码编辑器推荐

对于经常需要编写代码的程序员来说,拥有一款自己的编辑器是非常重要的事情,一款好用的代码编辑器往往能够让代码的编辑更加流畅,今天我们为大家带来最流行的代码编辑器Sublime TextSublime Text是一款快速轻量可定制的代码编辑器,…

geoserver发布瓦片_Geoserver2.15.1配置自带GeoWebCache 插件发布ArcGIS Server瓦片

之前写过一篇关于 Geoserver2.8.5 版本的部署配置发布 ArcGIS Server 瓦片点击查看,那是下载 Geoserver2.8.5 源码编译,重新打包 jar 来部署配置思路的,版本也比较旧。最近我想升级 Geoserver 版本,所以从官网下载最新版本 Geoser…

32 块大小_详解Linux文件系统的完整结构--引导块、超级块、GDT等

概述今天主要介绍一下Linux系统的文件系统,一起来看看吧~文件系统组成网上看到的一张完整的文件系统图,如下:首先,该图中有Boot Block、Super Block、GDT、Reserver GDT这几个概念,下面会分别介绍它们。然后&#xff0…

pythonista脚本_IPA Installer脚本下载-Pythonista脚本IPA Installer(安装手机ipa文件) - 极光下载站...

pythonista脚本IPA Installer,通过这个脚本,无需电脑,也可有让iOS苹果手机用户端轻松安装ipa文件,非常实用。安装速度快,没有大小限制。 主要特点: 无需上传,本地安装 没有大小限制 安装速度快 …

channelsftp 上传文件为空_SpringBoot文件上传下载篇(九)

点击上方蓝色字体,关注我们上传文件是互联网中应用的场景之一,最典型的情况就是上传头像。文件上传主要是将文件通过IO流传输到服务器的某一个特定的文件夹下。Why->MultipartFile?解析源码:public interface MultipartFile extends InputStreamSour…

excel 科学计数法转换成文本完整显示_表格技巧—Excel里身份证号码显示不全的多种解决办法...

运用Excel表格可以快速统计和汇总数据,那么当在表格当中输入身份证号码时,表格通常显示不完全,这是为什么呢,今天小编就来给大家详细介绍当身份证号码显示不全时的多种解决办法,一起来学习一下吧。首先,我们…

sublime运行python代码_怎么用sublime运行python

首先需要安装一个Sublime Text(http://www.sublimetext.com/)和一个Python(https://www.python.org/downloads/)接下来打开Sublime Text:1、如下图所示,点击菜单栏中的Tools —> Build System —> New Build System(系统默认选择的是Automatic&…

nginx header参数丢失_某Nginx后门分析与重现

安全分析与研究专注于全球恶意软件的分析与研究背景前几天,接到一个nginx后门样本,本着就分析和复现的思路,完整的将整个过程做一次复现,不料最终还获取到了后门的核心代码部分,遂将其整理发布,仅供学习研究…

bch纠错码 码长8_浅析BCH码的编码方法.docx

浅析BCH码的编码方法浅析BCH码的编码方法0 引言数字信号在传输系统中传输时,不免会受到各种因素的干扰,使到达接收端的数字信号中混有噪声,从而引发错误判决。为了抗击传输过程中的干扰,必然要利用纠错码的差错控制技术。BCH码是纠…

virtual box一直正在加载文件_Linux基础导航与文件管理

Linux基础导航与文件管理对于新手,或许很关心如何通过命令行来控制操作系统。这编文章将会尝试带你快速熟悉Linux系统基础,但是不会覆盖所有的Linux系统知识,在未来对Linux探索过程中会有很大的帮助。本篇文章继续学习Linux基础。准备与目标在…