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