vue实现数字增减

Vue 实现数字增减动画

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

方法一：使用 transition 和 watch

定义一个响应式数据，通过监听数据变化触发过渡效果。

<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
    }
  },
  methods: {
    increment() {
      this.currentNumber += 1
    },
    decrement() {
      this.currentNumber -= 1
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

方法二：使用第三方库（如 gsap 或 anime.js）

安装 GSAP：

npm install gsap

使用 GSAP 实现平滑的数字变化：

<template>
  <div>
    <span ref="number">{{ animatedNumber }}</span>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      currentNumber: 0,
      animatedNumber: 0
    }
  },
  watch: {
    currentNumber(newVal) {
      gsap.to(this, { 
        duration: 0.5, 
        animatedNumber: newVal 
      })
    }
  },
  methods: {
    increment() {
      this.currentNumber += 1
    },
    decrement() {
      this.currentNumber -= 1
    }
  }
}
</script>

方法三：自定义指令实现数字滚动

创建一个自定义指令，用于数字滚动效果：

<template>
  <div>
    <span v-count-up="currentNumber"></span>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentNumber: 0
    }
  },
  directives: {
    countUp: {
      bind(el, binding) {
        let start = 0
        const end = parseInt(binding.value)
        const duration = 1000
        const increment = end / (duration / 16)
        const timer = setInterval(() => {
          start += increment
          el.textContent = Math.floor(start)
          if (start >= end) {
            el.textContent = end
            clearInterval(timer)
          }
        }, 16)
      },
      update(el, binding) {
        let start = parseInt(el.textContent)
        const end = parseInt(binding.value)
        const duration = 1000
        const increment = (end - start) / (duration / 16)
        const timer = setInterval(() => {
          start += increment
          el.textContent = Math.floor(start)
          if (start >= end) {
            el.textContent = end
            clearInterval(timer)
          }
        }, 16)
      }
    }
  },
  methods: {
    increment() {
      this.currentNumber += 1
    },
    decrement() {
      this.currentNumber -= 1
    }
  }
}
</script>

方法四：使用 vue-count-to 插件

安装插件：

npm install vue-count-to

使用示例：

<template>
  <div>
    <count-to :startVal="0" :endVal="currentNumber" :duration="1000"></count-to>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

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

export default {
  components: { CountTo },
  data() {
    return {
      currentNumber: 0
    }
  },
  methods: {
    increment() {
      this.currentNumber += 1
    },
    decrement() {
      this.currentNumber -= 1
    }
  }
}
</script>

以上方法可根据项目需求选择适合的方案，第三方库通常提供更丰富的动画效果和更好的性能优化。