/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. 📚🖥️📱

Primary LanguageTypeScript

WAC — CSS transition and animation controls

Travis NPM

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.

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

Live Demo

Access the demo at https://web-animation.caferati.me

react-awesome-slider demo

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.

<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/wac.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 '@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

License

MIT. Copyright (c) 2018 Rafael Caferati.