在Firefox中测试transitionend事件支持 [英] Test for transitionend event support in Firefox

问题描述

我想测试浏览器以支持transitionend事件，我可以通过执行以下操作来轻松实现：

I would like to test the browser for support of the transitionend event, I can achieve this quite easily by doing:

var isSupported = 'ontransitionend' in window;

但是这在firefox中不起作用，是一个众所周知的问题。我找到了以下博客文章，介绍此处的解决方案：检测没有浏览器的事件支持嗅探，但我已经无法得到这个解决方案成功测试transitionend。

However this doesn't work in firefox and is a well known problem. I found the following blog post describing a solution to this here: Detecting event support without browser sniffing however I have been unable to get this solution to successfully test for transitionend either.

问题是，虽然这适用于大多数事件，如'onclick'这似乎不工作的transitionend事件，我找不到一个解决方案，工作。我创建了一个小提示以显示此操作，它首先测试onclick事件以演示

The issue is that while this works for most events like 'onclick' this doesn't seem to work for the transitionend event and I cannot find a solution that does work. I created a fiddle to show this in action, it first tests for the onclick event to demonstrate the technique works, then uses the same technique for transitionend.

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

Onclick returns true but ontransitionend returns false despite browser support being available.

推荐答案

我这样做

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;
}

那么您可以将其分配给变量

then you can assign it to the variable

var = isTransitionSupported();

那么我只使用所有监听器

then i use simply all listeners

var transEndEventNames = 'webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd transitionend';

并且对于jQuery：

and for jQuery for example:

el.on(transEndEventNames, function() { ... });

这篇关于在Firefox中测试transitionend事件支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！