Test for transitionend event support in Firefox

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.

One answer on “Test for transitionend event support in Firefox

  1. 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() { ... });
    

Comments are closed.