当前位置：首页 > VUE

vue怎么实现数字跳动

2026-02-20 17:51:49VUE

数字跳动动画实现方法

在Vue中实现数字跳动效果，可以通过以下几种方式实现：

使用transition组件结合CSS动画

通过Vue的transition组件配合CSS动画实现平滑的数字变化效果：

<template>
  <transition name="count-up">
    <span :key="currentNumber">{{ currentNumber }}</span>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0
    }
  },
  methods: {
    animateTo(target) {
      const duration = 1000 // 动画持续时间
      const start = this.currentNumber
      const increment = (target - start) / duration * 16

      const animate = () => {
        this.currentNumber += increment
        if ((increment > 0 && this.currentNumber < target) || 
            (increment < 0 && this.currentNumber > target)) {
          requestAnimationFrame(animate)
        } else {
          this.currentNumber = target
        }
      }
      animate()
    }
  }
}
</script>

<style>
.count-up-enter-active, .count-up-leave-active {
  transition: all 1s ease;
}
.count-up-enter, .count-up-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>

使用第三方库vue-countup

安装vue-countup库可以快速实现数字跳动效果：

vue怎么实现数字跳动

npm install vue-countup-v2

使用示例：

<template>
  <countTo :startVal="0" :endVal="target" :duration="2000"></countTo>
</template>

<script>
import countTo from 'vue-countup-v2'

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

自定义指令实现

创建自定义指令实现更灵活的控制：

vue怎么实现数字跳动

<template>
  <span v-count-up="value"></span>
</template>

<script>
export default {
  directives: {
    countUp: {
      inserted(el, binding) {
        const target = binding.value
        const duration = 2000
        const frameDuration = 1000 / 60
        const totalFrames = Math.round(duration / frameDuration)
        const easeOutQuad = t => t * (2 - t)

        let frame = 0
        const countTo = parseInt(el.innerText, 10) || 0

        const counter = setInterval(() => {
          frame++
          const progress = easeOutQuad(frame / totalFrames)
          const currentValue = Math.floor(countTo + (target - countTo) * progress)

          el.innerText = currentValue.toLocaleString()

          if (frame === totalFrames) {
            clearInterval(counter)
          }
        }, frameDuration)
      }
    }
  },
  data() {
    return {
      value: 1234
    }
  }
}
</script>

使用GSAP动画库

结合GSAP实现更复杂的数字动画效果：

<template>
  <div ref="number">{{ initialValue }}</div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      initialValue: 0,
      targetValue: 1000
    }
  },
  mounted() {
    gsap.to(this, {
      duration: 2,
      initialValue: this.targetValue,
      onUpdate: () => {
        this.$refs.number.textContent = Math.floor(this.initialValue)
      }
    })
  }
}
</script>