vue实现数字跳动
Vue 实现数字跳动效果
数字跳动效果常用于展示统计数据或动画过渡，以下是几种实现方式：
方法一：使用 transition 和计算属性
通过计算属性和过渡效果实现平滑的数字变化。
<template>
<div>
<transition name="slide-fade" mode="out-in">
<span :key="currentNumber">{{ currentNumber }}</span>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
targetNumber: 1000,
currentNumber: 0
}
},
mounted() {
this.animateNumber();
},
methods: {
animateNumber() {
const duration = 2000; // 动画持续时间（毫秒）
const startTime = Date.now();
const startValue = this.currentNumber;
const endValue = this.targetNumber;
const updateNumber = () => {
const now = Date.now();
const progress = Math.min((now - startTime) / duration, 1);
this.currentNumber = Math.floor(startValue + progress * (endValue - startValue));
if (progress < 1) {
requestAnimationFrame(updateNumber);
}
};
requestAnimationFrame(updateNumber);
}
}
}
</script>
<style>
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all 0.5s ease;
}
.slide-fade-enter, .slide-fade-leave-to {
opacity: 0;
transform: translateY(10px);
}
</style>方法二：使用第三方库（如 vue-count-to）
安装库：
npm install vue-count-to使用示例：
<template>
<countTo :startVal="0" :endVal="1000" :duration="2000"></countTo>
</template>
<script>
import countTo from 'vue-count-to';
export default {
components: { countTo }
}
</script>方法三：自定义指令实现
通过自定义指令封装数字跳动逻辑。
<template>
<div v-number-animate="targetNumber">{{ currentNumber }}</div>
</template>
<script>
export default {
data() {
return {
targetNumber: 1000,
currentNumber: 0
}
},
directives: {
'number-animate': {
bind(el, binding) {
let start = 0;
const end = binding.value;
const duration = 2000;
const step = (timestamp) => {
if (!start) start = timestamp;
const progress = Math.min((timestamp - start) / duration, 1);
el.textContent = Math.floor(progress * end);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
}
}
}
</script>关键点说明
- 平滑过渡：使用
requestAnimationFrame确保动画流畅。 - 性能优化：避免频繁操作 DOM，通过计算属性或指令集中更新。
- 扩展性：可通过参数控制动画时长、缓动函数等。
以上方法可根据实际需求选择，轻量场景推荐方法一，复杂需求可选用方法二或三。
