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