一、效果預覽

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

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

二、無縫滾動原理

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

三、程式碼

1、html部分

<template>
  <div class="lucky-user">  <!-- 容器 -->
    <ul class="user-list" :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="animation-duration: ${luckyUsers.length * 4}s;" 具體乘幾看自己喜歡。

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無縫滾動內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！