CSS controlled animations with transitionEnd, onTransitionEnd, animationend, onAnimationEnd events and frame throwing. Tiny javascript library with cross-browser methods to handle css animation/transition callbacks and event loop frame throwing.
npm install @rcaferati/wac !NPM
Tiny ~0.8kb javascript library with cross-browser methods to handle CSS ontransitionend and onanimationend events. AKA css animation and transition callbacks.
onceTransitionEnd wac method.javascript
wac.onceTransitionEnd(element).then(function(event) {
// ... do something
});
`Live Demo
Access the demo at https://web-animation.caferati.meInstallation
#### NPM Registry
From the
NPM registry using npm or yarn just install the web-animation-club package.
`
npm install --save web-animation-club
`
or
`
yarn add --save web-animation-club
`Basic Usage
For all the following examples please consider the following HTML markup.
`html
`#### HTML with ES5
`html
`
#### Javascript ES6
`jsx
import { onceTransitionEnd } from 'web-animation-club'; const element = document.querySelector('.box');
// here we're just simulating the addition of a class with some animation/transition
element.classList.add('animated');
element.classList.add('move');
// if you are using the transition css property
onceTransitionEnd(element).then((event) => {
// ... do something
});
`WAC methods
#### onceTransitionEnd(element, options)
-
element <[HTML element]> html element on which the transition is happening
- options <[object]>
- tolerance <[integer]> used in case of pseudo-element animations
- property <[string]> animated property to check before calling the callback#### onceAnimationEnd(element, options)
-
element <[HTML element]> html element on which the transition is happening
- options <[object]>
- tolerance <[integer]> used in case of pseudo-element animations
- property <[string]> animated property to check before calling the callback
#### beforeFutureCssLayout(frames, callback)
- frames <[integer]> Number of frames to skip
- callback <[function]> function called after the skipped frames#### beforeNextCssLayout(callback)
-
callback` <[function]> function called after the skipped frameMIT. Copyright (c) 2018 Rafael Caferati.