CSS Transition cross browser

Question

I'm trying to create a css animation callback. I think the only way to do it is with JavaScript. I'm going to have to normalize the callback name to have it cross browser support. I came upon this answer, which has the following code (a bit edited):

function transitionEndEventName () {
    var undefined,
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

    for (var i in transitions) {
        if (transitions.hasOwnProperty(i) && document.documentElement.style[i] !== undefined) {
            return transitions[i];
        }
    }
    return false
}

var transitionEnd = transitionEndEventName();
if (transitionEnd) {
    element.addEventListener(transitionEnd, theFunctionToInvoke);
}

My question is, is this still valid now, (Jan 2016)? Also, is it necessary to add an else statement (If transitionEnd === false) then add a timer, or will it never equal false?

score 1 · Accepted Answer · answered Jan 21 '16 at 18:29

1

It is no longer valid. As per this caniuse table, transitions are supported without prefix in all major browsers.

However, you should still handle the case where transitions aren't supported at all. I would suggest simplifying your code:

function onTransitionEnd(element,callback) {
    if( 'transition' in document.documentElement.style) {
        element.addEventListener('transitionend',callback);
    }
    else callback();
}

You can then make note in the callback as to whether or not you have an event object:

function theFunctionToInvoke(evt) {
    if( evt) {
        // function was called on transition end
    }
    else {
        // transitions not supported, function was called immediately
    }
}

answered Jan 21 '16 at 18:29

Niet the Dark Absol

320,036
81
464
592

Opera mini doesn't support css transitions? – Jessica Jan 21 '16 at 18:34
@Jessica Right, but no amount of vendor prefixing will help you with that. It *does not* support them. At all. That's where the `else callback()` comes in. – Niet the Dark Absol Jan 21 '16 at 18:35
Opera Mini is more of a browsercam screen shot viewer than a browser; it doesn't run anything dynamic; css or js... – dandavis Jan 21 '16 at 18:39
Really? So I can't do any animation in opera Mini? Also, Is it worth it supporting opera mini? – Jessica Jan 24 '16 at 21:22

CSS Transition cross browser

1 Answers1