Skip to content

boblemarin/AnimationEvents

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 

Repository files navigation

AnimationEvent.js

A simple utility script that generates pseudo-constants for CSS animation and transition events, so you don't have to worry about vendor prefixes.

The values are stored in the global scope, so they're easy to use in your entire project. If you don't feel like polluting the blogal scope, feel free to modify the source to accomodate your favourite coding style (I left some examples in the comments).

Usage :

Link to AnimationEvents.js in your source code.

<script type="text/javascript" src="AnimationEvents.js"></script>

Then use the following syntax to add your events listeners :

element.addEventListener( TRANSITION_END, myTransitionEndHandler, false );

Available values :

TRANSITION_END
ANIMATION_START
ANIMATION_ITERATION
ANIMATION_END

Why ?

Because some browsers use prefixed versions of event names (webkitTransitionEnd, oTransitionEnd) while others use the standard, lowercase version (ontransitionend). I find it difficult to remember and a hassle to have to write three addEventListener sentences for each event.

Credits

Packaged by @boblemarin, based on code written by Chris Heilmann (http://thewebrocks.com/demos/smashing-events/transitionevent.html)

About

simple utility script that generates constants for CSS animation and transition events

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published