CSS Transition 跨浏览器

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

CSS Transition 跨浏览器

CSS Transition cross browser

javascript

callback

css-transitions