Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Feature detection for transtionend/animationend event?

Feature detection for transtionend/animationend event?

Problem

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.

Problem courtesy of: mckamey

Solution

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/

Solution courtesy of: mckamey

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Feature detection for transtionend/animationend event?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×