当前位置：首页 > VUE

vue实现数字跳动

2026-01-17 01:00:10VUE

Vue 实现数字跳动效果

数字跳动（数字滚动动画）是一种常见的交互效果，通常用于展示统计数据、计数器等场景。以下是几种实现方式：

方法一：使用 transition 和 v-for

通过遍历数字字符并应用过渡效果实现跳动：

<template>
  <div class="number-display">
    <transition-group name="jump" tag="span">
      <span v-for="(digit, index) in displayedNumber" :key="index" class="digit">
        {{ digit }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      currentNumber: 0
    }
  },
  computed: {
    displayedNumber() {
      return String(this.currentNumber).split('')
    }
  },
  watch: {
    value(newVal) {
      this.animateNumber(newVal)
    }
  },
  methods: {
    animateNumber(target) {
      const duration = 1000
      const start = this.currentNumber
      const increment = (target - start) / duration * 16

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

<style>
.jump-enter-active, .jump-leave-active {
  transition: all 0.3s ease;
  display: inline-block;
}
.jump-enter, .jump-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
.digit {
  display: inline-block;
  min-width: 1em;
  text-align: center;
}
</style>

方法二：使用第三方库 vue-count-to

vue-count-to 是专门为 Vue 开发的数字动画组件：

安装依赖：

npm install vue-count-to

使用示例：

<template>
  <count-to :start-val="0" :end-val="target" :duration="2000"></count-to>
</template>

<script>
import CountTo from 'vue-count-to'
export default {
  components: { CountTo },
  data() {
    return {
      target: 1000
    }
  }
}
</script>

方法三：纯 CSS 动画结合 Vue

通过 CSS @keyframes 实现跳动效果：

<template>
  <div class="animated-number">{{ currentNumber }}</div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      currentNumber: 0
    }
  },
  watch: {
    value(newVal) {
      this.animateNumber(newVal)
    }
  },
  methods: {
    animateNumber(target) {
      const duration = 1000
      const start = this.currentNumber
      const frames = duration / 16
      const increment = (target - start) / frames

      let frame = 0
      const animate = () => {
        if (frame < frames) {
          this.currentNumber = Math.floor(start + (increment * frame))
          frame++
          requestAnimationFrame(animate)
        } else {
          this.currentNumber = target
        }
      }
      animate()
    }
  },
  mounted() {
    this.currentNumber = this.value
  }
}
</script>

<style>
.animated-number {
  animation: jump 0.5s ease;
}
@keyframes jump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
</style>

方法四：使用 GSAP 实现高级动画

GSAP 提供更强大的动画控制：

安装 GSAP：

npm install gsap

实现代码：

<template>
  <div ref="numberEl">{{ currentNumber }}</div>
</template>

<script>
import { gsap } from 'gsap'
export default {
  props: ['value'],
  data() {
    return {
      currentNumber: 0
    }
  },
  watch: {
    value(newVal) {
      this.animateWithGSAP(newVal)
    }
  },
  methods: {
    animateWithGSAP(target) {
      gsap.to(this, {
        duration: 1,
        currentNumber: target,
        ease: "elastic.out(1, 0.3)",
        onUpdate: () => {
          this.currentNumber = Math.floor(this.currentNumber)
        }
      })
    }
  },
  mounted() {
    this.currentNumber = this.value
  }
}
</script>