測試在Firefox

transitionend事件的支持，我想測試支持transitionend事件的瀏覽器，我可以這樣做很容易實現這一點：測試在Firefox

var isSupported = 'ontransitionend' in window;

然而，這並不工作在Firefox，是一個衆所周知的問題。我發現以下博客文章描述了此處的解決方案：Detecting event support without browser sniffing但是，我一直無法獲得此解決方案以成功測試轉換終端。

問題是，雖然這適用於大多數事件，如'onclick'這似乎並不適用於transitionend事件，我找不到一個可行的解決方案。我創建了一個fiddle以顯示此操作，它首先測試onclick事件以演示該技術的工作原理，然後使用相同的技術進行轉換。

Onclick返回true，但ontransitionend返回false儘管瀏覽器支持可用。

來源

2013-10-15 3urdoch

我做這樣的說法

function isTransitionsSupported() { 
    var thisBody = document.body || document.documentElement, 
     thisStyle = thisBody.style, 
     support = thisStyle.transition !== undefined || 
        thisStyle.WebkitTransition !== undefined || 
        thisStyle.MozTransition !== undefined || 
        thisStyle.MsTransition !== undefined || 
        thisStyle.OTransition !== undefined; 
    return support; 
}

那麼你可以把它分配給變量

var = isTransitionSupported();

然後我用簡單的所有聽衆

var transEndEventNames = 'webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd transitionend';

和jQuery的對例如：

el.on(transEndEventNames, function() { ... });

來源

2013-10-15 14:17:50

感謝這個，我沒有接受這個，因爲它沒有真正回答如何專門測試過渡結束的問題。但是，當它發生時，我不需要並最終採取類似的方法。 – 3urdoch

如果你有空間一點點獨立的工具，讓你瀏覽器transitionEnd事件名稱，或者如果不支持transitionEnd一個falsy值，這個（香草）腳本是相當真棒：

https://github.com/EvandroLG/transitionEnd/

（學分去大雄是針對我這個腳本！）

我做的在這裏一點點搗鼓測試：http://jsfiddle.net/cA24Z/2/

// load the transition-end.js (or the minified version) 
var tEnd = window.transitionEnd(document.createElement('div')); 
if (tEnd.transitionEnd) { 
    alert('This browser supports: ' + tEnd.transitionEnd + ' event'); 
} else { 
    alert('This browser does not support transitionEnd event.'); 
}

（ - ：Hasse

來源

2013-10-29 10:30:27 hasse

回答

相關問題