快捷導(dǎo)航

Vue?transition組件簡單實現(xiàn)數(shù)字滾動

更新時間：2022年09月22日 11:12:25 作者：田八

這篇文章主要為大家介紹了Vue?transition組件簡單實現(xiàn)數(shù)字滾動示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

實現(xiàn)效果

Scrip

<template>
  <button @click="addCount">點我滾動數(shù)字</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組件，來實現(xiàn)一個數(shù)字滾動效果，其實不僅可以是數(shù)字滾動，還可以是文字、段落滾動，代碼片段使用了定位做的，還可以使用transform，只是一種思路，不限制方案。

布局

沒有別人寫的東西炫酷，我都不知道怎么寫內(nèi)容了，布局沒啥好講的，我這里會有一個容器包裹內(nèi)部滾動的數(shù)字，主要是用于隱藏內(nèi)部滾動的數(shù)字超出的部分，代碼如下：

  <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%;
}

這里的細(xì)節(jié)就是transition組件是用于元素顯隱狀態(tài)切換使用的，一般用于v-if、v-show，還有transition-group也是一樣的，不過transition-group是用于多個元素上的，可以作用在列表上，對于列表的數(shù)據(jù)新增、刪除可以觸發(fā)過渡效果。

而我這里使用key，key發(fā)生改變可以強制元素的更新，可以完整的觸發(fā)組件的生命周期，就達(dá)到了元素銷毀和創(chuàng)建的整個過程，也可以觸發(fā)過渡，key的作用老生常談了，可以網(wǎng)上去查查資料，用得好可以有很多巧妙的作用。

動畫

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

過渡css代碼：

/* 
動畫激活時給予初始狀態(tài)，這個基礎(chǔ)狀態(tài)用于定義后續(xù)過渡動作的起點
這里統(tǒng)一定義了組件創(chuàng)建和組件銷毀的兩個起點，主要是賦予 transition 使其有一個過渡
*/
.roll-enter-active,
.roll-leave-active {
  transition: all .3s;
  position: absolute;
  top: 0;
}
/* 
組件銷毀，過渡的終點
最開始的起點是原位，離開的時候滾到上面去
*/
.roll-leave-to {
  top: -1em;
}
/*
組件創(chuàng)建，過渡的起點
創(chuàng)建的時候是重下往上進(jìn)入，所以元素最開始是在下面
*/
.roll-enter-active {
  top: 1em;
}
/*
過渡的時候回到起點，達(dá)到重下往上滾動
*/
.roll-enter-to {
  top: 0;
}

代碼就這么一丟丟，只要理解了過渡的生命周期，就可以控制各種效果，我這里這個應(yīng)該是入門級代碼，這里的細(xì)節(jié)就是需要定義一個過渡的起點，因為使用的是定位，如果不設(shè)置起點是沒有過渡效果的，如果是用變換（transform）可以不用設(shè)置起點，為什么這個就和css相關(guān)了，不在這次的談?wù)摲秶畠?nèi)。

邏輯控制

邏輯控制主要是要動畫執(zhí)行完成之后才能再次修改變量，否則就會有重疊，閃動等，造成動畫不連貫，我這里動畫執(zhí)行時間是300毫秒，所以也就是300毫秒只能修改一次狀態(tài)。

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

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

總結(jié)

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

以上就是Vue transition組件簡單實現(xiàn)數(shù)字滾動的詳細(xì)內(nèi)容，更多關(guān)于Vue transition數(shù)字滾動的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: