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则为假值，这个（vanilla）脚本非常棒：

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

（ - ：哈斯

测试Firefox中的transitionend事件支持

2 个答案: