Fighting Design

Appearance

On this page

Number Animate 数字动画 ​

动画不会停吗？

基本使用 ​

from 和 to 参数配置开始的数字和目标数字

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 ​