πŸ“šπŸ–₯οΈπŸ“± Tiny javascript library with cross-browser methods to handle CSS ontransitionend and onanimationend events. AKA css animation and transition callbacks.
Switch branches/tags
Nothing to show
Clone or download
Latest commit f8ad3a1 Sep 21, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo add reviewed demo Sep 10, 2018
dist remove package-lock Sep 9, 2018
src fix setCssEndEvent options Sep 9, 2018
.babelrc.json implement simple demo Sep 9, 2018
.eslintrc.json implement simple demo Sep 9, 2018
.gitignore forced release Jun 12, 2018
.postcssrc.json forced release Jun 12, 2018
.travis.yml add travis Sep 12, 2018
README.md Update README.md Sep 14, 2018
package.json 0.2.2 Sep 21, 2018
webpack.config.js implement simple demo Sep 9, 2018

README.md

web-animation-club

Travis NPM

Tiny ~0.8kb javascript library with cross-browser methods to handle CSS ontransitionend and onanimationend events. AKA css animation and transition callbacks.

Quick usage

Quick usage example of the onceTransitionEnd wac method.

wac.onceTransitionEnd(element).then(function(event) {
  // ... do something
});

Live Demo

Access the demo at https://webanimation.club

react-awesome-slider demo

Installation

From the dist file

Just load directly in your HTML the web-animation-club.min.js javascript file located on the dist folder.

... 
<script src="https://webanimation.club/library/0.1.2/web-animation-club.min.js"></script>
...

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.

<style>
  .animated {
    transition: transform 0.4s linear;
  }
  .move {
    transform: translateX(100px);
  }
</style>
<div class="container">
  <div class="box"></div>
</div>

HTML with ES5

<script src="/path/to/web-animation-club.min.js"></script>
<script>
  var box = document.querySelector('.box');
  
  box.classList.add('animated');
  box.classList.add('move');
  
  onceTransitionEnd(box).then(function(event) {
    // ... do something
  });
</script>

Javascript ES6

  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 frame

Author

Rafael Caferati

License

MIT. Copyright (c) 2018 Rafael Caferati.