vue怎么实现数字跳动
数字跳动动画实现方法
在Vue中实现数字跳动效果可以通过多种方式完成，以下是几种常见的方法：
使用transition和watch
通过监听数字变化，结合CSS过渡效果实现平滑跳动：
<template>
<div class="number" :style="{ transform: `translateY(${offset}px)` }">
{{ currentValue }}
</div>
</template>
<script>
export default {
props: ['value'],
data() {
return {
currentValue: this.value,
offset: 0
}
},
watch: {
value(newVal) {
this.animateNumber(newVal)
}
},
methods: {
animateNumber(target) {
const duration = 1000
const start = this.currentValue
const change = target - start
const startTime = performance.now()
const animate = (currentTime) => {
const elapsed = currentTime - startTime
const progress = Math.min(elapsed / duration, 1)
this.currentValue = Math.floor(start + change * progress)
this.offset = Math.sin(progress * Math.PI) * -10
if (progress < 1) {
requestAnimationFrame(animate)
} else {
this.currentValue = target
this.offset = 0
}
}
requestAnimationFrame(animate)
}
}
}
</script>
<style>
.number {
transition: transform 0.1s ease-out;
display: inline-block;
}
</style>使用第三方库
推荐使用vue-count-to库快速实现：
安装：
npm install vue-count-to使用示例：
<template>
<countTo :startVal="start" :endVal="end" :duration="3000"></countTo>
</template>
<script>
import countTo from 'vue-count-to'
export default {
components: { countTo },
data() {
return {
start: 0,
end: 1000
}
}
}
</script>纯CSS动画方案
通过CSS关键帧动画实现简单跳动效果：
<template>
<div class="jumping-number" :key="value">
{{ value }}
</div>
</template>
<style>
.jumping-number {
animation: jump 0.5s;
}
@keyframes jump {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}
</style>自定义指令实现
创建Vue指令处理数字变化时的动画：
Vue.directive('count', {
bind(el, binding) {
let start = 0
const end = parseInt(binding.value)
const duration = 2000
const stepTime = Math.abs(Math.floor(duration / (end - start)))
const timer = setInterval(() => {
start += 1
el.innerHTML = start
if (start === end) clearInterval(timer)
}, stepTime)
}
})
// 使用方式
<div v-count="1000"></div>性能优化建议
对于频繁变化的数字，建议使用requestAnimationFrame而非setInterval。可以结合Vue的transition组件和watch属性来实现更流畅的动画效果。如果数字变化幅度较大，考虑分阶段动画以减少性能开销。
