javascript - CSS 跨浏览器过渡

Question

我正在尝试创建一个 CSS 动画回调。我认为唯一的方法是使用 JavaScript。我将必须规范化回调名称以使其跨浏览器支持。我发现this answer ，其中包含以下代码(稍作编辑):

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

它不再有效。根据this caniuse table ，所有主要浏览器都支持无前缀转换。

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

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