当前位置：首页 > VUE

vue实现数字增减

2026-01-19 21:50:26VUE

数字增减动画实现

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

使用transition和watch

通过监听数据变化，使用CSS过渡效果实现平滑的数字变化。

<template>
  <div>
    <transition name="fade" mode="out-in">
      <span :key="currentNumber">{{ currentNumber }}</span>
    </transition>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0,
      targetNumber: 0
    }
  },
  methods: {
    increment() {
      this.targetNumber += 10
    },
    decrement() {
      this.targetNumber -= 10
    }
  },
  watch: {
    targetNumber(newVal) {
      const difference = newVal - this.currentNumber
      const step = difference / 30

      const animate = () => {
        if (Math.abs(this.currentNumber - newVal) > Math.abs(step)) {
          this.currentNumber += step
          requestAnimationFrame(animate)
        } else {
          this.currentNumber = newVal
        }
      }

      animate()
    }
  }
}
</script>

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

使用第三方库

Vue-count-to是一个专门用于数字动画的库，安装简单，使用方便。

npm install vue-count-to

<template>
  <div>
    <countTo :startVal="0" :endVal="targetNumber" :duration="2000"></countTo>
    <button @click="targetNumber += 100">增加</button>
    <button @click="targetNumber -= 100">减少</button>
  </div>
</template>

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

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

使用GSAP实现高级动画

GSAP提供了更强大的动画控制能力，适合复杂场景。

<template>
  <div>
    <span ref="numberEl">0</span>
    <button @click="animateTo(targetNumber + 100)">增加</button>
    <button @click="animateTo(targetNumber - 100)">减少</button>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      targetNumber: 0
    }
  },
  methods: {
    animateTo(newVal) {
      gsap.to(this, {
        duration: 1,
        targetNumber: newVal,
        onUpdate: () => {
          this.$refs.numberEl.textContent = Math.floor(this.targetNumber)
        }
      })
    }
  }
}
</script>