Package Exports

web-animation-club

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (web-animation-club) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

web-animation-club

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

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

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

JSPM