javascript - 测试 Firefox 中的 Transitionend 事件支持

Question

我想测试浏览器对transitionend事件的支持，我可以通过以下方式轻松实现:

var isSupported = 'ontransitionend' in window;

但是这在 Firefox 中不起作用，并且是一个众所周知的问题。我发现以下博客文章描述了此问题的解决方案:Detecting event support without browser sniffing但是我也无法让这个解决方案成功测试过渡结束。

问题是，虽然这适用于大多数事件，例如“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() { ... });