当前位置：首页 > VUE

vue怎么实现数字跳动

2026-01-20 01:48:57VUE

数字跳动动画实现方法

在Vue中实现数字跳动效果可以通过多种方式完成，以下是几种常见的方法：

使用transition和watch

通过监听数字变化，结合CSS过渡效果实现平滑跳动：

<template>
  <div class="number" :style="{ transform: `translateY(${offset}px)` }">
    {{ currentValue }}
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      currentValue: this.value,
      offset: 0
    }
  },
  watch: {
    value(newVal) {
      this.animateNumber(newVal)
    }
  },
  methods: {
    animateNumber(target) {
      const duration = 1000
      const start = this.currentValue
      const change = target - start
      const startTime = performance.now()

      const animate = (currentTime) => {
        const elapsed = currentTime - startTime
        const progress = Math.min(elapsed / duration, 1)
        this.currentValue = Math.floor(start + change * progress)
        this.offset = Math.sin(progress * Math.PI) * -10

        if (progress < 1) {
          requestAnimationFrame(animate)
        } else {
          this.currentValue = target
          this.offset = 0
        }
      }

      requestAnimationFrame(animate)
    }
  }
}
</script>

<style>
.number {
  transition: transform 0.1s ease-out;
  display: inline-block;
}
</style>

使用第三方库

推荐使用vue-count-to库快速实现：

安装：

npm install vue-count-to

使用示例：

<template>
  <countTo :startVal="start" :endVal="end" :duration="3000"></countTo>
</template>

<script>
import countTo from 'vue-count-to'

export default {
  components: { countTo },
  data() {
    return {
      start: 0,
      end: 1000
    }
  }
}
</script>

纯CSS动画方案

通过CSS关键帧动画实现简单跳动效果：

<template>
  <div class="jumping-number" :key="value">
    {{ value }}
  </div>
</template>

<style>
.jumping-number {
  animation: jump 0.5s;
}

@keyframes jump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
</style>

自定义指令实现

创建Vue指令处理数字变化时的动画：

Vue.directive('count', {
  bind(el, binding) {
    let start = 0
    const end = parseInt(binding.value)
    const duration = 2000
    const stepTime = Math.abs(Math.floor(duration / (end - start)))

    const timer = setInterval(() => {
      start += 1
      el.innerHTML = start
      if (start === end) clearInterval(timer)
    }, stepTime)
  }
})

// 使用方式
<div v-count="1000"></div>