<template>
  <button @click="addCount">點(diǎn)我滾動(dòng)數(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>
      

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

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

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