I'm looking for a cleaner way to feature detect the actual name of the transitionend
. I've seen a lot of examples just brute force adding handlers to all the variations. Also, I don't want to have to rely on jQuery (or similar framework).
I'm basically starting with this list and hoping to just bind the best fit (i.e., first in list to match).
var transitionendName,
events = [
'transitionend',
'webkitTransitionEnd',
'MozTransitionEnd',
'oTransitionEnd'
];
// ^^^^^ your code here
myElem.addEventListener(transitionendName, myHandler, false);
Anyone feel they have a clean solution to this? The same solution presumably will work for animationend
events.
Edit: msTransitionEnd and '-ms-' prefixed properties were removed in one of the final IE10 release candidates.
Using @jfriend00 's answer/example it becomes easier to create a lighter weight detection.
// cssPrefix is any method which detects the property name
var transition = cssPrefix('transition');
var transitionend = {
'transition': 'transitionend',
'webkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd'
}[transition];
See it in action: http://jsfiddle.net/mckamey/qWPTg/