在Vue中使用CSS3實現內容無縫滾動的示例代碼

一、效果預覽

最近在做一個活動頁面，遇到幸運用戶中獎的滾動公告需求。下面是實現效果：

（gif錄制略顯卡頓，實際效果很流暢）

二、無縫滾動原理

1、容器寬高固定，超出內容隱藏；2、內容準備2份，現參與滾動的內容有A、B兩份，向左滾動；3、滑動過程中，B份緊隨A份之后，營造出無縫滾動回來的效果；4、在A部分內容完全滾出容器的一瞬間，立刻將AB內容位置復原，由于A、B內容一模一樣，這個復原過程很難看出來；5、循環第3步；

三、代碼

1、html部分

<template> <div class='lucky-user'> <!-- 容器 --> <ul :style='`animation-duration: ${luckyUsers.length * 4}s;`'> <!-- 內容區容器 --> <li v-for='(item, index) in luckyUsers' :key='index'>{{ item }}</li> <!-- 內容A --> <li v-for='(item, index) in luckyUsers' :key='index+’copy’'>{{ item }}</li> <!-- 內容B --> </ul> </div></template>

2、CSS部分

.lucky-user { width: 540px; //容器定寬高 height: 30px; margin: 0 auto; font-size: 18px; line-height: 30px; color: #E9B65F; overflow: hidden; //超出內容隱藏 .user-list { width: fit-content; // Q1 white-space: nowrap; // 內容不換行 animation-name: seamless-scrolling; // Q3 animation-timing-function: linear; // 動畫速度曲線，勻速 animation-iteration-count: infinite; // 動畫循環無限次播放 li { display: inline-block; margin-right: 30px; } }}@keyframes seamless-scrolling { 0% { transform: translateX(0px); } 100% { transform: translateX(-50%); //Q2 }}

Q1：因為滾動內容一般都不是固定的，需要接口獲取，所以內容區的寬度也就無法確定，這里使用CSS3的新特性width: fit-content，使寬度自適應內部內容，至于為什么這里需要設置寬度屬性，見下文Q2：設置動畫。由于內容區實際有AB兩份，B是A的副本，所以一段動畫的終點就是內容區向左位移50%（內容區width的50%），這也就解釋了Q1中為什么一定要設置寬度屬性了：如果不設置，width的值不會隨內容撐開，此時的50%是父容器width的50%，終點值就錯了Q3：為什么animation不采用簡寫形式，而是拆開？ 因為animation-duration 動畫時長不能固定，如果接口獲取到的數據很多，動畫時長固定5s，那滾動地得有多快？所以animation-duration采用屬性綁定形式，根據數據長度進行延長 : 具體乘幾看自己喜歡。我也試過采用簡寫形式進行style屬性綁定，結果發現動畫不生效。

3、JS部分

export default { name: ’app’, data() { return { luckyUsers: [] } }, created() { this.getLuckyUsersList() }, methods: { getLuckyUsersList () { //調接口拿取數據 this.luckyUsers = [ ’000000抽中了xxx獎品’, ’111111抽中了xxx獎品’, ’222222抽中了xxx獎品’, ] } }}

四、總結

無縫滾動的實現主要借助了css3中的animation、width:fit-content自適應屬性、translate位移等特性;從實現原理上看，其實就是一個欺騙眼睛的小伎倆而已～

到此這篇關于在Vue中使用CSS3實現內容無縫滾動的示例代碼的文章就介紹到這了,更多相關Vue CSS3無縫滾動內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！