Vue transition組件簡單實現數字滾動

Posted on by

實現效果

Scrip

<template>
  <button @click="addCount">點我滾動數字</button>
  <div class="roll-container">
    <transition name="roll">
      <div class="roll-number" :key="count">{{ count }}</div>
    </transition>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    const count = ref(0);
    let click_time = Date.now();
    function addCount() {
      if (Date.now() - click_time < 300) return;
      click_time = Date.now();
      count.value += 1;
    }
    return {
      count,
      addCount,
    };
  },
});
</script>
<style>
.roll-container {
  position: relative;
  text-align: center;
  font-size: 120px;
  line-height: 1em;
  color: #fff;
  height: 1em;
  min-width: 1em;
  max-width: 3em;
  background: #000000;
  overflow: hidden;
}
.roll-number {
  /* position: absolute; */
  /* top: 0; */
  width: 100%;
}
.roll-enter-active,
.roll-leave-active {
  transition: all .3s;
  position: absolute;
  top: 0;
}
.roll-leave-to {
  top: -1em;
}
.roll-enter-active {
  top: 1em;
}
.roll-enter-to {
  top: 0;
}
</style>

使用vue的transition組件，來實現一個數字滾動效果，其實不僅可以是數字滾動，還可以是文字、段落滾動，代碼片段使用瞭定位做的，還可以使用transform，隻是一種思路，不限制方案。

佈局

沒有別人寫的東西炫酷，我都不知道怎麼寫內容瞭，佈局沒啥好講的，我這裡會有一個容器包裹內部滾動的數字，主要是用於隱藏內部滾動的數字超出的部分，代碼如下：

  <div class="roll-container">
    <transition name="roll">
      <div class="roll-number" :key="count">{{ count }}</div>
    </transition>
  </div>

樣式如下：

.roll-container {
  position: relative;
  text-align: center;
  font-size: 120px;
  line-height: 1em;
  color: #fff;
  height: 1em;
  min-width: 1em;
  max-width: 3em;
  background: #000000;
  overflow: hidden;
}
.roll-number {
  width: 100%;
}

這裡的細節就是transition組件是用於元素顯隱狀態切換使用的，一般用於v-if、v-show，還有transition-group也是一樣的，不過transition-group是用於多個元素上的，可以作用在列表上，對於列表的數據新增、刪除可以觸發過渡效果。

而我這裡使用key，key發生改變可以強制元素的更新，可以完整的觸發組件的生命周期，就達到瞭元素銷毀和創建的整個過程，也可以觸發過渡，key的作用老生常談瞭，可以網上去查查資料，用得好可以有很多巧妙的作用。

動畫

動畫是使用vue的transition組件的css class過渡方式，官網上的文檔過渡的生命周期描述的很清楚，我就不搬運瞭，vue transiton組件

過渡css代碼：

/* 
動畫激活時給予初始狀態，這個基礎狀態用於定義後續過渡動作的起點
這裡統一定義瞭組件創建和組件銷毀的兩個起點，主要是賦予 transition 使其有一個過渡
*/
.roll-enter-active,
.roll-leave-active {
  transition: all .3s;
  position: absolute;
  top: 0;
}
/* 
組件銷毀，過渡的終點
最開始的起點是原位，離開的時候滾到上面去
*/
.roll-leave-to {
  top: -1em;
}
/*
組件創建，過渡的起點
創建的時候是重下往上進入，所以元素最開始是在下面
*/
.roll-enter-active {
  top: 1em;
}
/*
過渡的時候回到起點，達到重下往上滾動
*/
.roll-enter-to {
  top: 0;
}

代碼就這麼一丟丟，隻要理解瞭過渡的生命周期，就可以控制各種效果，我這裡這個應該是入門級代碼，這裡的細節就是需要定義一個過渡的起點，因為使用的是定位，如果不設置起點是沒有過渡效果的，如果是用變換（transform）可以不用設置起點，為什麼這個就和css相關瞭，不在這次的談論范圍之內。

邏輯控制

邏輯控制主要是要動畫執行完成之後才能再次修改變量，否則就會有重疊，閃動等，造成動畫不連貫，我這裡動畫執行時間是300毫秒，所以也就是300毫秒隻能修改一次狀態。

    const count = ref(0);
    // 緩存第一次狀態修改的時間
    let click_time = Date.now();
    function addCount() {
      // 300ms 隻能執行一次
      if (Date.now() - click_time < 300) return;
      // 重置狀態修改的時間
      click_time = Date.now();
      count.value += 1;
    }

這個就是一個很簡單的邏輯控制，這裡是通過點擊來修改的，這裡也可以通過定時器去處理。

總結

以前要做一個數字滾動需要弄一個插件，插件代碼也多，通過js進行控制處理，一般都是把0-9的數字放一排，然後滾動，滾動完成把頭部的數字放到尾部，而使用transition組件隻要這麼一丟丟代碼就可以完成相同的功能，如果在加上vue3新出的css變量綁定，還可以做到過渡動畫執行時間的動態控制。

以上就是Vue transition組件簡單實現數字滾動的詳細內容，更多關於Vue transition數字滾動的資料請關註WalkonNet其它相關文章！

推薦閱讀：