Web-animation-club NPM

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://web-animation.caferati.me

Installation

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