1.0.0 • Published 5 months ago
rickton-num-flip-animation v1.0.0
rickton-num-flip-animation
基于number-flip-animation更新,兼容IE10+
安装
npm install rickton-num-flip-animation
基本使用
import { NumberFlip } from 'rickton-num-flip-animation';
import 'rickton-num-flip-animation/dist/number-flip.css'
const numberFlip = new NumberFlip({
rootElement: document.getElementById('number-flip');//需要滚动的容器
initialNumber:123 //初始滚动数字
});
numberFlip.setNumber(newNumber);
Options
NumberFlip类的构造函数接受具有以下属性的对象
参数 | 说明 | 默认值 |
---|---|---|
rootElement (required) | 展示滚动的容器(选择器) | null |
durationSlide (optional) | 从一个数字到下一个数字的滑动动画的持续时间(毫秒)。 | 1000 |
durationFade (optional) | 从数字中删除数字时淡出动画的持续时间(毫秒)。如果要更改的新号码的位数少于要更改的号码的位数,则数字将被删除。 | 200 |
initialNumber (optional) | 创建实例时将显示的数字 | null |
animateInitialNumber (optional) | 是否设置动画 | true |
decimalSeparator (optional) | 分隔符 | . |
wrapperClassname (optional) | 包含所有数字的包装器元素的css类名。(不建议修改) | numberflip-digit-container |
digitClassname (optional) | 每个数字元素的css类名。如果这是从默认值更改的,则css文件中的类需要相应地更改。 (不建议修改) | numberflip-digit-container-value |
1.0.0
5 months ago