Skip to content

NumberAnimation 数字滚动

数字从当前值缓动到目标值的动画组件,到目标值停止并派发 oas-finishprefers-reduced-motion 时直接跳目标,断开连接自动取消 rAF 无泄漏。

基础用法

默认 1500ms 从 0 滚到目标

速度与小数位

duration=3000 + to-fixed=2

结束事件

oas-finish 回调

字号定制

字号默认固定为 --oas-font-size-lg(16px,不随外层变化),可用 CSS 变量 --oas-number-animation-font 显式定制(如 32px)。

API

属性

属性说明类型默认值
duration动画时长(毫秒);0 直接跳目标number | string
to-fixed小数位(Number.prototype.toFixed);缺省整数显示string
value目标数值;非法按 0string0

事件

事件说明
oas-finish动画抵达目标时派发一次,detail { value: 目标值 }
  • 动画中途修改 value 会从当前显示值续动到新目标。
  • 系统开启「减少动态效果」时跳过动画直接显示目标值(同样派发 oas-finish)。
  • 断开连接时取消未完成的 rAF,无泄漏。

基于 MIT OR Apache-2.0 双许可发布