Change number with flipping animation
$ npm install --save number-flip
import { Flip } from 'number-flip'
new Flip({
node: $('.flip'),
from: 9527,
to: 42
})new Flip({
node: $('.flip'),
from: 9527,
to: 42,
delay: 1 // second
})const el = new Flip({
node: $('.flip'),
from: 9527
})
el.flipTo({to: 42})new Flip({
node: document.querySelector('.flip'),
from: 9527,
to: 42,
duration: 2 // second
})new Flip({
node: document.querySelector('.flip'),
from: 73,
to: 25,
duration: 2,
delay: 1,
easeFn: function(pos) {
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
return 0.5 * (Math.pow((pos-2),3) + 2);
},
// for more easing function, see https://github.com/danro/easing-js/blob/master/easing.js
systemArr: ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
})HTML structure of a 3-digits flip would be like:
.number-flip
.ctnr.ctnr0
.digit*10
.ctnr.ctnr1
.digit*10
.ctnr.ctnr2
.digit*10
The height / width of .number-flip is based on the height / width of .digit, you can customize the size by changing the css of .digit:
.number-flip { ... }
.ctnr { ... }
.digit { ... }or you can rename it in config:
new Flip({
containerClassName: 'c',
digitClassName: 'd',
separatorClassName: 's'
})Spearator allowed
new Flip({
node: $('.flip'),
from: 95279527,
separator: ','
})even more
new Flip({
node: $('.flip'),
from: 95279527,
separator: ['万', '亿', '兆'],
separateEvery: 4
})var flipInstance = new Flip(options)
flipInstance.flipTo(instanceOptions)The returned Flip instance has a function called flipTo.
flipTo takes one instanceOptions, so you can start the flip animation whenever you want.
options
node: AnElementobject representing the animation container. Make sure this element is already existed in the DOM when younewthe instance.from: The number that animation starts from.Optionalif you want to flip with 0. Expected a positive integer.to: The number that animation rolls to.Optionalif you want to start manually. Expected a positive integer.durationoptional: The animation duration in seconds. If not specified,durationdefaults to 0.5 second.delayoptional: The delay of animation in seconds. If not specified, there's nodelay.easeFnoptional: A easing function to be executed. If not specified,easeFndefaults easeInOutCubic.systemArroptional: An array ten-lengthed, representing the content of each decimal rolling system. If not specified,systemArrdefaults to[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ].directoptional: A boolean representing if the number would rolling directly or one by one. For example, from 0 to 99, the ones place would pass 9 digits if is direct. Or if is not directly, would pass 99 digits, 9 rounds for each of the tens place. If not specified,directdefaultstrue.separator: A string / array representing the separator, defaults off. Could set to a string or an array-of-string.seperateOnly: A number representing the only separator， defaults0.separateEvery: The number per digit separator would add to, defaults3, won't work ifseperateOnlyhas been set.
instanceOptions
to: Same asoptions.to.durationoptional: Same asoptions.duration.easeFnoptional: Same asoptions.easeFn.directoptional: Same asoptions.direct.
- flip with FLIP
- syntax
- browser compatibility list
MIT
Special thanks to Browserstack providing cross-browser testing.
yarn dev
yarn build- fork this repo
git checkout -b NEW-FEATUREgit commit -am 'ADD SOME FEATURE'git push origin NEW-FEATURE
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent