1.0.0 • Published 5 months ago

rickton-num-flip-animation v1.0.0

Weekly downloads
-
License
-
Repository
-
Last release
5 months ago

rickton-num-flip-animation

基于number-flip-animation更新,兼容IE10+

点击跳转Github仓库地址

安装

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