transition对纯文本节点（如{{count}}）无效，因Vue响应式更新直接替换文本内容；需用setInterval或setTimeout手动控制数值变化过程，配合Math.ceil/parseInt确保整数精度和终点准确。
uni-app里用transition做数字跳动不生效？别试了
直接说结论：transition对纯文本节点（比如{{count}}）无效，因为Vue的响应式更新会直接替换整个文本内容，没有“过渡”可言。想实现数字从0跳到123的动画效果，必须手动控制数值变化过程。
用setInterval + Math.ceil做匀速增长最稳妥
这是兼容性最好、逻辑最清晰的做法，尤其适合uni-app多端（微信小程序/H5/App）统一行为。关键不是“动起来”，而是“动得准”——避免因帧率波动导致终点值跳过或卡住。
实操建议：
- 用
parseInt或Math.floor确保起始/目标值是整数，防止小数累积误差 - 总时长固定（如300ms），但步长按
Math.ceil((target - start) / (duration / 16))动态算，比固定步长更稳 - 务必在动画结束时手动赋值
target，防止四舍五入导致最终值差1 - 微信小程序中避免在
setData高频调用时传入大对象，只更新数字字段本身
const start = 0
const target = 123
const duration = 300
const step = Math.max(1, Math.ceil((target - start) / (duration / 16)))
let current = start
const timer = setInterval(() => {
current += step
if (current >= target) {
current = target
clearInterval(timer)
}
this.count = current // 触发视图更新
}, 16)
微信小程序真机上数字跳动卡顿？检查data层级和更新频率
小程序 setData 有性能瓶颈，如果count嵌套在深层对象里（如info.numbers.total），每次更新都会触发整棵子树diff；同时，16ms间隔在低端机上可能被节流，造成掉帧。
解决方法：
- 把跳动数字提级到
data顶层，例如直接定义count: 0，而非stats: { count: 0 } - 改用
setTimeout替代setInterval，每帧手动调度，便于中途清除 - 真机调试时打开“调试器→WXML→强制刷新渲染树”，确认是否因节点复用导致文本节点未重建
- H5端可用
requestAnimationFrame，但小程序不支持，别写进去
需要 easing 缓动效果？自己写个简单贝塞尔插值就够了
不需要引入完整动画库。一个cubic-bezier(.25,.46,.45,.94)模拟的缓入缓出，用公式t * t * (3 - 2 * t)就能覆盖80%场景，且无兼容问题。
示例逻辑：
const easeOutCubic = t => t * t * (3 - 2 * t) // 在定时器内： const progress = Date.now() - startTime const ratio = Math.min(progress / duration, 1) const eased = easeOutCubic(ratio) this.count = Math.floor(start + (target - start) * eased)
注意：easing只影响“比例”，最终仍要Math.floor或Math.round取整，否则小数会显示为“122.9999999”。
真正难的不是让数字动起来，而是动完那一刻刚好停在目标整数上——所有中间计算都得对齐这个终点，否则用户一眼就看出bug。
