当前位置：首页 > VUE

vue 实现数字跳动

2026-03-08 19:37:15VUE

Vue 实现数字跳动效果

数字跳动效果可以通过动态更新数字并结合动画实现。以下是几种常见方法：

使用 transition 和动态数据绑定

<template>
  <div>
    <transition name="fade">
      <span :key="currentNumber">{{ currentNumber }}</span>
    </transition>
    <button @click="changeNumber">改变数字</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0,
      targetNumber: 100
    }
  },
  methods: {
    changeNumber() {
      const increment = this.targetNumber > this.currentNumber ? 1 : -1
      const timer = setInterval(() => {
        this.currentNumber += increment
        if (this.currentNumber === this.targetNumber) {
          clearInterval(timer)
        }
      }, 20)
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: all 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
</style>

使用第三方库如 Tween.js

安装 Tween.js：

npm install @tweenjs/tween.js

实现代码：

vue 实现数字跳动

<template>
  <div>
    <span>{{ animatedNumber.toFixed(0) }}</span>
    <button @click="animateNumber">开始动画</button>
  </div>
</template>

<script>
import { Tween } from '@tweenjs/tween.js'

export default {
  data() {
    return {
      animatedNumber: 0
    }
  },
  methods: {
    animateNumber() {
      const target = { num: this.animatedNumber }
      const tween = new Tween(target)
        .to({ num: 100 }, 1000)
        .onUpdate(() => {
          this.animatedNumber = target.num
        })
        .start()

      function animate(time) {
        requestAnimationFrame(animate)
        Tween.update(time)
      }
      animate()
    }
  }
}
</script>

使用 CSS 动画

<template>
  <div>
    <span class="counter" :data-target="targetNumber">{{ currentNumber }}</span>
    <button @click="startCounter">开始计数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0,
      targetNumber: 1000
    }
  },
  methods: {
    startCounter() {
      const duration = 2000 // 动画持续时间
      const startTime = Date.now()

      const updateCounter = () => {
        const elapsed = Date.now() - startTime
        const progress = Math.min(elapsed / duration, 1)
        this.currentNumber = Math.floor(progress * this.targetNumber)

        if (progress < 1) {
          requestAnimationFrame(updateCounter)
        }
      }

      requestAnimationFrame(updateCounter)
    }
  }
}
</script>

<style>
.counter {
  display: inline-block;
  transition: all 0.5s ease-out;
}
</style>

使用 Vue Transition 组件

<template>
  <div>
    <transition name="slide-fade">
      <span :key="currentNumber" class="number">{{ currentNumber }}</span>
    </transition>
    <button @click="incrementNumber">增加数字</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0
    }
  },
  methods: {
    incrementNumber() {
      const steps = 10
      const target = this.currentNumber + 100
      const increment = (target - this.currentNumber) / steps

      for (let i = 0; i < steps; i++) {
        setTimeout(() => {
          this.currentNumber += increment
        }, i * 100)
      }
    }
  }
}
</script>

<style>
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
.number {
  display: inline-block;
  font-size: 24px;
}
</style>