web-animation-club

WebJar for web-animation-club

License	MIT
GroupId	org.webjars.npm
ArtifactId	web-animation-club
Last Version	0.2.2
Release Date	Aug 26, 2019
Type	jar
Description	web-animation-club WebJar for web-animation-club
Project URL	http://webjars.org
Source Code Management	https://github.com/rcaferati/web-animation-club

Download web-animation-club

Filename	Size
web-animation-club-0.2.2.pom
web-animation-club-0.2.2.jar	292 KB
web-animation-club-0.2.2-sources.jar	22 bytes
web-animation-club-0.2.2-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/web-animation-club/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>web-animation-club</artifactId>
    <version>0.2.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/web-animation-club/
implementation 'org.webjars.npm:web-animation-club:0.2.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/web-animation-club/
implementation ("org.webjars.npm:web-animation-club:0.2.2")

Apache Buildr

'org.webjars.npm:web-animation-club:jar:0.2.2'

Apache Ivy

<dependency org="org.webjars.npm" name="web-animation-club" rev="0.2.2">
  <artifact name="web-animation-club" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='web-animation-club', version='0.2.2')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "web-animation-club" % "0.2.2"

Leiningen

[org.webjars.npm/web-animation-club "0.2.2"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

web-animation-club

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

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

• Checkout my Full-Stack Web Developer Website
• Other open source projects @ Code Laboratory
• A scope of my work @ Web Portfolio

License

MIT. Copyright (c) 2018 Rafael Caferati.

Versions

Version
0.2.2 Aug 26, 2019