Skip to content
On this page

Number Animate 数字动画

动画不会停吗?

基本使用

fromto 参数配置开始的数字和目标数字

0
开启

格式化

locale-string 属性可格式化数字

100
开启

动画时长

approximate-time 属性可配置动画时长

100
开启

重新播放

组件内部暴露 run 方法可重新调用播放动画

0
开启

Attributes

参数说明类型可选值默认值
from开始数字number——0
to目标数字number————
approximate-time动画结束的大概时间number——2000
locale-string格式化数字boolean——false
styles滚动组件样式CSSProperties————
automatic是否初始化自动播放动画boolean——true
on-animation-end动画结束触发函数AnimationEnd————

Methods

参数说明
run重新播放动画

Interface

组件导出以下类型定义:

ts
import type {
  NumberAnimateInstance,
  NumberAnimateProps,
  AnimationEnd
} from 'fighting-design'

AnimationEnd

ts
type AnimationEnd = (elapsed: number) => void

Contributors