vue自己实现数字跳动

实现数字跳动动画

在Vue中实现数字跳动动画可以通过CSS过渡或JavaScript动画库完成。以下是几种常见方法：

使用CSS Transition

通过Vue的数据绑定和CSS过渡实现平滑的数字变化效果：

<template>
  <div class="counter">{{ animatedNumber }}</div>
</template>

<script>
export default {
  data() {
    return {
      targetNumber: 1000,
      animatedNumber: 0
    }
  },
  mounted() {
    this.animateNumber()
  },
  methods: {
    animateNumber() {
      const duration = 2000 // 动画持续时间(ms)
      const startTime = performance.now()

      const updateNumber = (currentTime) => {
        const elapsedTime = currentTime - startTime
        const progress = Math.min(elapsedTime / duration, 1)
        this.animatedNumber = Math.floor(progress * this.targetNumber)

        if (progress < 1) {
          requestAnimationFrame(updateNumber)
        }
      }

      requestAnimationFrame(updateTime)
    }
  }
}
</script>

<style>
.counter {
  transition: all 0.5s ease-out;
  font-size: 24px;
}
</style>

使用GSAP动画库

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

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

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      number: 0
    }
  },
  mounted() {
    this.animateTo(1000)
  },
  methods: {
    animateTo(target) {
      gsap.to(this, {
        number: target,
        duration: 2,
        onUpdate: () => {
          this.number = Math.floor(this.number)
        }
      })
    }
  }
}
</script>

使用Vue Transition组件

结合Vue的Transition组件实现更复杂的动画效果：

<template>
  <transition name="slide-fade">
    <div key="counter" class="counter">{{ currentValue }}</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      currentValue: 0,
      targetValue: 1000
    }
  },
  mounted() {
    setInterval(() => {
      if (this.currentValue < this.targetValue) {
        this.currentValue += Math.ceil((this.targetValue - this.currentValue) * 0.1)
      }
    }, 100)
  }
}
</script>

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

使用自定义指令

创建Vue自定义指令实现复用：

<template>
  <div v-counter="targetNumber"></div>
</template>

<script>
export default {
  data() {
    return {
      targetNumber: 1000
    }
  }
}
</script>

<script>
// 全局指令
Vue.directive('counter', {
  bind(el, binding) {
    let current = 0
    const target = binding.value
    const increment = target / 100

    const timer = setInterval(() => {
      current += increment
      if (current >= target) {
        current = target
        clearInterval(timer)
      }
      el.textContent = Math.floor(current)
    }, 10)
  }
})
</script>

格式化显示数字

添加千位分隔符等格式化功能：

methods: {
  formatNumber(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  }
}

以上方法可根据具体需求选择或组合使用，CSS Transition适合简单动画，GSAP适合复杂动画效果，自定义指令便于复用，Transition组件可实现进出动画。