Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rcaferati/wac
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. 📚🖥️📱
https://github.com/rcaferati/wac
animation-library css css-animations css-transitions css3 javascript-animation-library javascript-library react
Last synced: about 7 hours ago
JSON representation
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. 📚🖥️📱
- Host: GitHub
- URL: https://github.com/rcaferati/wac
- Owner: rcaferati
- Created: 2018-05-26T17:20:11.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-10-22T10:55:00.000Z (almost 2 years ago)
- Last Synced: 2024-09-15T19:38:37.307Z (10 days ago)
- Topics: animation-library, css, css-animations, css-transitions, css3, javascript-animation-library, javascript-library, react
- Language: TypeScript
- Homepage: https://web-animation.caferati.me
- Size: 945 KB
- Stars: 59
- Watchers: 4
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WAC — CSS transition and animation controls
[](https://travis-ci.org/rcaferati/web-animation-club) 
Tiny `~0.8kb` javascript library with cross-browser methods to handle CSS `ontransitionend` and `onanimationend` event — AKA CSS animation and transition callbacks.
## Quick usage
Quick usage example of the `onceTransitionEnd` wac method.
```javascript
wac.onceTransitionEnd(element).then(function(event) {
// ... do something
});
```
## Live Demo
Access the demo at [https://web-animation.caferati.me](https://web-animation.caferati.me)
[
](https://web-animation.caferati.me)
## Installation
#### NPM Registry
From the `NPM registry` using npm or yarn just install `@rcaferati/wac` package.
```
npm install --save @rcaferati/wac
```
or
```
yarn add --save @rcaferati/wac
```
## Basic Usage
For all the following examples please consider the following HTML markup.
```html
.animated {
transition: transform 0.4s linear;
}
.move {
transform: translateX(100px);
}
```
#### HTML with ES5
```html
var box = document.querySelector('.box');
box.classList.add('animated');
box.classList.add('move');
onceTransitionEnd(box).then(function(event) {
// ... do something
});
```
#### Javascript ES6
```jsx
import { onceTransitionEnd } from '@rcaferati/wac';
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 frame
## Author
#### Rafael Caferati
+ Checkout my Portfolio Website
+ Follow on GitHub
+ Connect on LinkedIn
## License
MIT. Copyright (c) 2018 Rafael Caferati.