测试 Firefox 中的 transitionend 事件支持答案

【问题标题】：Test for transitionend event support in Firefox测试 Firefox 中的 transitionend 事件支持
【发布时间】：2013-10-15 14:05:44
【问题描述】：

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

var isSupported = 'ontransitionend' in window;

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

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

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

【问题讨论】：

标签： javascript css

【解决方案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() { ... });

【讨论】：

谢谢你，我没有接受这个，因为它并没有真正回答如何专门测试过渡结束的问题。但事实证明，我不需要这样做，并最终采取了类似的方法。

【解决方案2】：

如果您有空间放置一个小型独立工具，该工具可以为您提供浏览器的 transitionEnd 事件名称，或者如果不支持 transitionEnd 则提供虚假值，那么这个（原版）脚本非常棒：

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

【讨论】：