2

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

var isSupported = 'ontransitionend' in window;

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

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

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

4

2 回答 2

5

我正在这样做

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() { ... });
于 2013-10-15T14:17:50.067 回答
0

如果您有空间放置一个小的独立工具，该工具可以为您提供浏览器的 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.');
}

(-:哈斯

于 2013-10-29T10:30:27.770 回答