https://github.com/magnetikonline/css-animation-event
Cross browser library for handling CSS animation and transition DOM events with a fallback pattern for unsupported browsers.
https://github.com/magnetikonline/css-animation-event
browser css-animations css-transitions
Last synced: 12 months ago
JSON representation
Cross browser library for handling CSS animation and transition DOM events with a fallback pattern for unsupported browsers.
- Host: GitHub
- URL: https://github.com/magnetikonline/css-animation-event
- Owner: magnetikonline
- License: mit
- Created: 2013-05-18T06:23:34.000Z (about 13 years ago)
- Default Branch: main
- Last Pushed: 2022-01-11T23:19:15.000Z (over 4 years ago)
- Last Synced: 2025-04-06T20:25:04.078Z (about 1 year ago)
- Topics: browser, css-animations, css-transitions
- Language: JavaScript
- Homepage: https://magnetikonline.github.io/css-animation-event/
- Size: 44.9 KB
- Stars: 91
- Watchers: 7
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS animation event
A very small (approx **800 bytes** minified and gzipped) cross browser compatible library to handle CSS3 animation and transition DOM events with a fall back pattern for unsupported browsers.
Tested successfully with CSS animation/transition supported browsers of:
- Google Chrome
- Mozilla Firefox
- Opera (12.10+)
- IE10+
Library supports Internet Explorer IE9 and above, a final version with IE8 support is [tagged here](https://github.com/magnetikonline/css-animation-event/tree/ie8-final).
- [Why?](#why)
- [Usage](#usage)
- [Example](#example)
- [Methods](#methods)
- [onAnimationEnd(element,handler[,data])](#onanimationendelementhandlerdata)
- [cancelAnimationEnd(element)](#cancelanimationendelement)
- [onTransitionEnd(element,handler[,data])](#ontransitionendelementhandlerdata)
- [cancelTransitionEnd(element)](#canceltransitionendelement)
- [animationSupport()](#animationsupport)
- [transitionSupport()](#transitionsupport)
- [addAnimation{Start|Iteration|End}(element,handler)](#addanimationstartiterationendelementhandler)
- [removeAnimation{Start|Iteration|End}(element,handler)](#removeanimationstartiterationendelementhandler)
- [addTransitionEnd(element,handler)](#addtransitionendelementhandler)
- [removeTransitionEnd(element,handler)](#removetransitionendelementhandler)
## Why?
The CSS3 [animation](https://www.w3.org/TR/css3-animations/) and [transition](https://www.w3.org/TR/css3-transitions/) modules both provide useful DOM events which can be used to track the current state of an animation or transition - extremely useful for chaining future application logic as they progress and complete.
Whilst support for these events is (thankfully) provided in virtually every browser that offers CSS [animations](https://caniuse.com/#feat=css-animation) and [transitions](https://caniuse.com/#feat=css-transitions), as a front-end developer you are still left with the issue of coding alternative program flows where support isn't available and therefore won't fire your animation/transition event handlers.
Consider the following example:
```css
#movethis {
/* leaving out browser prefixes for brevity */
height: 100px;
transition: height 1.5s ease-in;
}
#movethis.nowmove {
height: 300px;
}
```
```js
// determineCSSTransitionSupport() would determine if browser supports CSS transitions
var supportCSSTransitions = determineCSSTransitionSupport();
// move our element
var moveThisEl = document.getElementById('movethis');
moveThisEl.className += ' nowmove';
// code around no transition support
if (supportCSSTransitions) {
moveThisEl.addEventListener('transitionend',nextUIStep,false);
} else {
nextUIStep();
}
function nextUIStep() {
// the transition ended, keep going
}
```
Having to continually make the decision to utilise DOM animation/transition events vs. a graceful fallback (via `supportCSSTransitions` in example above) throughout your UI code soon becomes clumsy and error prone.
## Usage
[CSSAnimEvent](cssanimevent.js) manages the above situation in a different way, relying on the fact that CSS transitions by design fall back gracefully with unsupported browsers handling element CSS property changes as instant, with a zero transition time.
Methods `onAnimationEnd(element,handler)` and `onTransitionEnd(element,handler)` simply mimic this behaviour by instantaneously calling the given `handler` for browsers that don't provide animation and/or transition support.
Rewriting the above JavaScript example we can now do:
```js
// move our element
var moveThisEl = document.getElementById('movethis');
moveThisEl.className += ' nowmove';
// browsers supporting CSS transitions will call nextUIStep() after the transition ends
// ...otherwise it will be called as window.setTimeout(nextUIStep)
CSSAnimEvent.onTransitionEnd(moveThisEl,nextUIStep);
function nextUIStep() {
// the transition ended, keep going
}
```
One caveat to be aware of, both `onAnimationEnd()` and `onTransitionEnd()` create 'one shot' event handlers and should be called *just after* CSS updates have been applied to the element, allowing instant delegation back to the given callback handler for unsupported browsers.
Internally `CSSAnimEvent` attaches singular `animationend` and `transitionend` event handlers to the `