对transtionend / animationend事件的特征检测？ [英] Feature detection for transtionend/animationend event?

问题描述

我正在寻找一种更清洁的方法来检测 transitionend 的实际名称。我见过很多例子，只是强力添加处理程序的所有变体。此外，我不想依靠jQuery（或类似的框架）。

I'm looking for a cleaner way to feature detect the actual name of the transitionend. I've seen a lot of examples just brute force adding handlers to all the variations. Also, I don't want to have to rely on jQuery (or similar framework).

我基本上从这个列表开始，希望只绑定最佳契合（即，列表中的第一个匹配）。

I'm basically starting with this list and hoping to just bind the best fit (i.e., first in list to match).

var transitionendName,
    events = [
        'transitionend',
        'webkitTransitionEnd',
        'MozTransitionEnd',
        'oTransitionEnd'
    ];

// ^^^^^ your code here

myElem.addEventListener(transitionendName, myHandler, false);

任何人都觉得他们有一个干净的解决方案？同样的解决方案可能适用于 animationend 事件。

Anyone feel they have a clean solution to this? The same solution presumably will work for animationend events.

Edit： msTransitionEnd和' -ms-'前缀属性

msTransitionEnd and '-ms-' prefixed properties were removed in one of the final IE10 release candidates.

推荐答案

在最终的IE10发布候选人之一中删除了.aspxrel =nofollow

Using @jfriend00 's answer/example it becomes easier to create a lighter weight detection.

// cssPrefix is any method which detects the property name
var transition = cssPrefix('transition');

var transitionend = {
    'transition': 'transitionend',
    'webkitTransition': 'webkitTransitionEnd',
    'MozTransition': 'transitionend',
    'OTransition': 'oTransitionEnd'
}[transition];

查看实际操作： http://jsfiddle.net/mckamey/qWPTg/

这篇关于对transtionend / animationend事件的特征检测？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！