CODEWITHSUNDEEP
javascriptcallbackcss-transitions
Jessica
Jessica

Reputation: 9830

CSS Transition cross browser

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?

Upvotes: 0

Views: 996

Answers (1)

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

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
    }
}

Upvotes: 1

Related Questions