这篇文章主要为大家详细介绍了Vue跑马灯marquee组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue跑马灯marquee组件的具体代码,供大家参考,具体内容如下
一、实现效果
二、实现过程
前言:最开始用间隔器方案制作了一个跑马灯,但是放在移动端中会出现严重的掉帧卡顿现象,于是整理思路后采用transition方案制作一个从右到左的动画处理问题
思路整理:
1. 过渡是需要设定时间的,但是跑马灯中的文本可能是长短不一的
解决方案:根据文本的总宽度(即文本总长)设定过渡时间,假设文本宽度500px,我们将其除以50,即过渡时间为10s
原生js表示如下:
const text = document.getElementsByClassName("text")[0] // 文本 const textWidth = text.clientWidth // 文本的总宽度 const tranTime = textWidth / 50 // 根据文本宽度设置过渡时间 text.style.transition = "left " + tranTime + "s linear" // 滚动前绑定过渡属性
2. 要想持续滚动需要重复触发滚动的事件
解决方案:通过上文的过渡时间设定一个重复时间
原生js表示如下:
const againTime = tranTime * 1000 + 1000 // 重新开始滚动时间计算(动态) // 开始滚动 function textRoll() { // 滚动操作 // `````` setTimeout(() => { textRoll() }, againTime); }
3. 接下来实现文本滚动效果
1) 先将文本设定在容器最右侧
2) 为文本绑定设定好的过渡属性,例:transition: left 10s linear
3) 因为有过渡属性,此时再将文本设定到容器最左侧,就会产生一个从右向左的移动的过渡
原生js表示如下:
function textRoll() { text.style.transition = "left " + tranTime + "s linear" // 滚动前绑定过渡属性 text.style.left = -textWidth + "px" // 向容器最左移动 setTimeout(() => { setTimeout(() => { textRoll() }, 0); }, againTime); }
4.到目前就能有一次完整的滚动了,接下来是定义重新滚动
让文本回到容器最右侧,但是目前文本已经有过渡属性了,如果改变其left会导致他从左向右滚动,所以要先清除过渡属性,再改变其left到容器最右侧,然后用一开始设定的再次滚动时间绑定定时器
function textRoll() { text.style.transition = "left " + tranTime + "s linear" // 滚动前绑定过渡属性 text.style.left = -textWidth + "px" // 向容器最左移动 setTimeout(() => { // 还原文本位置 text.style.transition = "" // 还原前需清除过渡 text.style.left = wrapperWidth + "px" setTimeout(() => { textRoll() }, 0); }, againTime); }
三、js版本源码
跑马灯 如何四纪为天子,不及卢家有莫愁。
四、Vue组件源码
{{ text }}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持0133技术站。
以上就是Vue跑马灯marquee组件使用方法详解的详细内容,更多请关注0133技术站其它相关文章!