2

I would like to test the browser for support of the transitionend event, I can achieve this quite easily by doing:

var isSupported = 'ontransitionend' in window;

However this doesn't work in firefox and is a well known problem. I found the following blog post describing a solution to this here: Detecting event support without browser sniffing however I have been unable to get this solution to successfully test for transitionend either.

The issue is that while this works for most events like 'onclick' this doesn't seem to work for the transitionend event and I cannot find a solution that does work. I created a fiddle to show this in action, it first tests for the onclick event to demonstrate the technique works, then uses the same technique for transitionend.

Onclick returns true but ontransitionend returns false despite browser support being available.

3urdoch
  • 7,192
  • 8
  • 42
  • 58

2 Answers2

5

I'm doing it that way

function isTransitionsSupported() {
    var thisBody = document.body || document.documentElement,
        thisStyle = thisBody.style,
        support = thisStyle.transition !== undefined || 
                  thisStyle.WebkitTransition !== undefined || 
                  thisStyle.MozTransition !== undefined || 
                  thisStyle.MsTransition !== undefined || 
                  thisStyle.OTransition !== undefined;
    return support;
}

then you can assign it to the variable

var = isTransitionSupported();

then i use simply all listeners

var transEndEventNames = 'webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd transitionend';

and for jQuery for example:

el.on(transEndEventNames, function() { ... });
Mikołaj Stolarski
  • 183
  • 6
  • Thanks for this, I haven't accepted this as it didn't really answer the question of how specifically to test for transition end. But as it transpires I didn't need to and ended up taking a similar approach to this. – 3urdoch Mar 11 '14 at 18:23
0

If you have room for a little standalone tool that gives you the browsers transitionEnd event name, or a falsy value if transitionEnd isn't supported, this (vanilla) script is quite awesome:

https://github.com/EvandroLG/transitionEnd/

(credits goes to nobita that directed me to this script!)

I have made a little fiddle test of it here: http://jsfiddle.net/cA24Z/2/

// load the transition-end.js (or the minified version)
var tEnd = window.transitionEnd(document.createElement('div'));
if (tEnd.transitionEnd) {
    alert('This browser supports: ' + tEnd.transitionEnd + ' event');
} else {
    alert('This browser does not support transitionEnd event.');
}

(-:Hasse

hasse
  • 883
  • 2
  • 10
  • 24