transtionend/animationend事件的特征检测？

Question

我正在寻找一种更清晰的方法来检测实际的名称transitionend.我已经看到很多例子只是强力添加处理程序到所有的变化.另外,我不想依赖jQuery(或类似的框架).

我基本上从这个列表开始,并希望绑定最合适的(即列表中的第一个匹配).

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

// ^^^^^ your code here

myElem.addEventListener(transitionendName, myHandler, false);

有人觉得他们有一个干净的解决方案吗？相同的解决方案可能适用于animationend事件.

编辑: msTransitionEnd和'-ms-'前缀属性在最终的IE10发布候选版本中被删除.

Answer 1

使用@jfriend00的答案/示例，创建更轻的重量检测变得更容易。

// 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/