测试Firefox中的transitionend事件支持

Question

我想测试一下浏览器对transitionend事件的支持，我可以很容易地做到这一点：

var isSupported = 'ontransitionend' in window;

然而，这在firefox中不起作用，这是一个众所周知的问题。我在这里找到了下面的一篇博客文章，描述了一个解决方案：Detecting event support without browser sniffing，但是我也无法让这个解决方案成功地测试transitionend。

问题是，虽然这对像'onclick‘这样的大多数事件都有效，但它似乎不适用于transitionend事件，我找不到一个可以工作的解决方案。我创建了一个fiddle来实际展示这一点，它首先测试onclick事件以演示该技术的工作原理，然后使用相同的技术进行transitionend。

Onclick返回true，但尽管浏览器支持可用，但ontransitionend返回false。

Answer 1

我就是这么做的

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() { ... });

Answer 2

如果您有足够的空间使用一个独立的小工具来提供浏览器的transitionEnd事件名称，或者在不支持transitionEnd的情况下使用一个假值，那么这个(普通的)脚本非常棒：

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

(致谢的是nobita，它指引我到这个脚本！)

我在这里做了一个小测试：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