Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript snippet to get CSS Animation event types (animationstart, animationend, animationiteration).
var CSSAnimation = (function(window, document, undefined) {
'use strict';
function camelCaseEventTypes(prefix) {
prefix = prefix || '';
return {
start: prefix + 'AnimationStart',
end: prefix + 'AnimationEnd',
iteration: prefix + 'AnimationIteration'
};
}
function lowerCaseEventTypes(prefix) {
prefix = prefix || '';
return {
start: prefix + 'animationstart',
end: prefix + 'animationend',
iteration: prefix + 'animationiteration'
};
}
/**
* @return {Object} Animation Event types {start, end, iteration}
*/
function getEventTypes() {
var prefixes = ['webkit', 'Moz', 'O', ''];
var style = document.documentElement.style;
if(style.animationName !== undefined) {
return lowerCaseEventTypes();
}
for(var i = 0, len = prefixes.length, prefix; i < len; i++) {
prefix = prefixes[i];
if(style[prefix + 'AnimationName'] !== undefined) {
if(i === 0) {
return camelCaseEventTypes(prefix.toLowerCase());
} else if(i === 1) {
return lowerCaseEventTypes();
} else if(i === 2) {
return lowerCaseEventTypes(prefix.toLowerCase());
}
}
}
return {};
}
return {
getEventTypes: getEventTypes
};
}(window, window.document));
var eventTypes = CSSAnimation.getEventTypes();
if(eventTypes.start !== undefined) {
var foo = document.getElementById('foo');
foo.addEventListener(eventTypes.start, onAnimStart, false);
foo.addEventListener(eventTypes.end, onAnimEnd, false);
}
else {
console.log('not supported');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.