Function detection for transtionend / animationend event?

Question

I am looking for a cleaner way to determine the actual name of transitionend . I saw many examples, just brute force, adding handlers to all the variations. Also, I don't want to rely on jQuery (or a similar structure).

Basically, I start with this list and hopefully just snap the best match (i.e. first on the list).

 var transitionendName, events = [ 'transitionend', 'webkitTransitionEnd', 'MozTransitionEnd', 'oTransitionEnd' ]; // ^^^^^ your code here myElem.addEventListener(transitionendName, myHandler, false); 

Does anyone feel like they have a clean solution? The same solution would apparently work for animationend events.

Edit: msTransitionEnd and '-ms-' prefix properties have been removed in one of the final release candidates for IE10 .

Answer 1

Using @ jfriend00's answer / example, it’s easier to create easier weighting.

 // 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 in action: http://jsfiddle.net/mckamey/qWPTg/

Answer 2

You can register all event names and then run a very short CSS transition and see which one fires. In addition, IE10 uses transitionend , so there is no browser that uses msTransitionEnd .

Here is an example of how to do this: http://jsfiddle.net/jfriend00/5Zv9m/

 var transitionendName, events = [ 'transitionend', 'webkitTransitionEnd', 'MozTransitionEnd', 'oTransitionEnd' ]; function findTransitionEnd(callback) { // add an off-screen element var elem = document.createElement("div"); elem.id = "featureTester"; document.body.appendChild(elem); // clean up temporary element when done function cleanup() { document.body.removeChild(elem); elem = null; } // set fallback timer in case transition doesn't trigger var timer = setTimeout(function() { if (!transitionendName) { cleanup(); callback(""); } }, 200); // register all transition end names for (var i = 0; i < events.length; i++) { (function(tname) { elem.addEventListener(tname, function() { if (!transitionendName) { transitionendName = tname; clearTimeout(timer); cleanup(); callback(tname); } }); })(events[i]); } // trigger transition setTimeout(function() { elem.className = "featureTestTransition"; }, 1); } 

Answer 3

Another variation that is suitable for detecting a pure function (rather than a purely pragmatic solution), but more effective:

 var transitionendNames = [ 'transitionend', 'webkitTransitionEnd', 'MozTransitionEnd', 'oTransitionEnd' ]; /** * Helper function to bind to the correct transitionend event * @param {function} callback The function to call when the event fires */ var transitionend = function(elem, callback) { var handler = function(e) { //console.log('transitionend == '+e.type); // test in case multiple were registered before change if (transitionendNames) { // store the actual name var transitionendName = e.type; // every other time, bind only to actual event transitionend = function(elem, callback) { elem.addEventListener(transitionendName, callback, false); }; // flag for any others transitionendNames = null; } return callback.call(elem, e); }; // until an event has been triggered bind them all for (var i=0, len=transitionendNames.length; i<len; i++) { elem.addEventListener(transitionendNames[i], handler, false); } }; 

Answer 4

I know this is old, but I would just like to add: the style attribute is not always a good way to detect an animation / transition prefix. For example, some android browsers do not use a prefix for transitions, but webkitAnimationEnd for a JS event.