在 Firefox 中测试 transitionend 事件支持

Question

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

var isSupported = 'ontransitionend' in window;

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

问题是，虽然这适用于像“onclick”这样的大多数事件，但这似乎不适用于 transitionend 事件，我找不到有效的解决方案。我创建了一个小提琴来展示这一点，它首先测试 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() { ... });