1.1.1 • Published 12 months ago
number-flip-animation v1.1.1
number-flip-animation
This package makes it easy to transition between to numbers using a flip/slide animation. The new number being changed to does not need to have the same number of digits as the number being changed from. Leading zeros are not being used.
Installation
npm install number-flip-animation
Basic usage
Import the module and the css file
import { NumberFlip } from 'number-flip-animation';
import 'number-flip-animation/dist/styles.css';
Create a new class instance and provide an HTMLElement.
const numberFlip = new NumberFlip({
rootElement: document.getElementById('number-flip'),
});
To set a number or change the current number, call setNumberTo
on the instance
numberFlip.setNumberTo({
newNumber: 123,
});
Options
rootElement
: AnHTMLElement
Object used to inject the necessary html nodes.newNumber
: The number that should be changed to.durationFlip
: The duration in milliseconds of the flip/slide transitiondurationOpacity
: The duration in milliseconds of the fade out transitionclearRootElement
: Whether the child elements of therootElement
should be deletedelements
: AnHTMLCollection
orNodeList
of elements that should be changed (Only used insetNumberForElements
)attributeName
: The name of the data attribute that should be used to get the number from the element (Only used insetNumberForElements
)
Methods
The NumberFlip class accepts options through the constructor and two public methods.
Constructor
const numberFlip = new NumberFlip({
rootElement: document.getElementById('number-flip'),
newNumber: 123,
durationFlip: 1000,
durationOpacity: 200,
clearRootElement: false,
});
setNumberTo
numberFlip.setNumberTo({
rootElement: document.getElementById('number-flip'),
newNumber: 123,
durationFlip: 1000,
durationOpacity: 200,
clearRootElement: false,
});
setNumberForElements
numberFlip.setNumberForElements({
elements: document.getElementsByClassName('number-flip'),
attributeName: 'data-number',
durationFlip: 1000,
durationOpacity: 200,
clearRootElement: false,
});
Limitations
- Currently it is not possible to display negative numbers (Due to the lack of a leading minus sign).
- A thousand delimiter is not shown.
- Only whole numbers can be displayed.
License
MIT