跨浏览器的 CSS 过渡

Question

我正在尝试创建一个css动画回调。我认为唯一的方法是使用 JavaScript。我将不得不规范化回调名称以使其跨浏览器支持。我遇到了这个答案，它有以下代码（经过一些编辑）：

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

我的问题是，现在这仍然有效吗（2016 年 1 月）？另外，是否有必要添加一个else语句（如果transitionEnd === false）然后添加一个计时器，或者它永远不会等于false？

Answer 1

它不再有效。根据此 caniuse 表，所有主要浏览器都支持不带前缀的转换。

但是，您仍应处理根本不支持转换的情况。我建议简化您的代码：

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

然后，您可以在回调中记下您是否具有事件对象：

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