css transition无法直接作用于纯数字文本内容，需通过自定义属性映射为可过渡的css属性（如transform、opacity）或用javascript插值实现平滑增长动画。
transition 无法作用于纯数字文本内容
CSS transition 不会响应 textContent 或 innerText 的直接变更——浏览器不把纯文本节点的数值变化视为可过渡的样式属性。你改了 innerHTML = "123"，再改成 "456"，不会有任何动画，哪怕写了 transition: all 0.3s。
常见错误现象：element.textContent = newValue 后数字“啪”一下跳变，控制台没报错，但动画就是不触发。
- 必须把数字渲染为某个**可过渡的 CSS 属性值**，最常用的是
transform: translateX()或opacity - 更稳妥的做法是用一个
<span></span>包裹数字，靠scale()或opacity做入场/更新动效 - 若想保留“增长感”，得自己计算差值、生成中间帧（用
requestAnimationFrame）或借助@keyframes配合动态 class 切换
用 CSS 自定义属性 + transition 模拟数字过渡
核心思路：把数字映射成一个 CSS 自定义属性（如 --num-value），再用 transform 或 clip-path 把它“可视化”。虽然不能直接过渡数字，但可以过渡它的视觉表现。
使用场景：仪表盘计数器、进度百分比、实时数据面板等需要轻量动效的地方。
立即学习“前端免费学习笔记（深入）”；
- HTML 中设一个容器：
<div class="counter" style="--num-value: 0"><span>0</span></div> - CSS 里写：
.counter span { transform: scaleX(calc(var(--num-value) / 100)); transition: transform 0.4s ease-out; }（仅示意比例缩放） - JS 更新时别碰
textContent，而是改style.setProperty('--num-value', newValue) - 注意：
calc()里不能混用单位和无单位值，--num-value必须是纯数字，且需确保初始值存在（否则 fallback 可能失效）
真正平滑增长：用 JavaScript 控制数值插值
当需要“从 127 到 893”这种带中间过程的增长动画时，CSS 本身做不到——它没有数值插值能力。必须 JS 主导，CSS 只负责渲染每一帧。
性能影响：高频 requestAnimationFrame 更新 textContent 没问题，但若同时触发布局重排（如读取 offsetHeight），就会卡顿。
- 用
let start = currentNum, end = targetNum，在 rAF 回调中线性插值：current = start + (end - start) * progress - 更新 DOM 时只写一次：
el.textContent = Math.floor(current)，避免反复读写 - 别用
setInterval：精度差、不易暂停、容易堆叠回调 - 如果数字位数变化大（如 99 → 100），考虑加
font-variant-numeric: tabular-nums防止宽度跳动
兼容性与字体渲染细节
数字增长动画在 Safari 和旧版 Chrome 上容易出现文字模糊或闪烁，根源常是 subpixel 渲染 + GPU 加速切换冲突。
容易被忽略的地方：不是所有数字字体都等宽，1 和 0 宽度不同会导致容器晃动，尤其在居中对齐时。
- 强制启用硬件加速：
transform: translateZ(0)或will-change: transform（慎用，别滥用） - 用等宽字体更可控：
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace - 给容器设固定
width或min-width，配合text-align: right可减少跳动 - iOS Safari 对
will-change处理不稳定，测试时务必真机验证
事情说清了就结束。
