javascript - transtionend/animationend 事件的特征检测？

Question

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

我基本上从这个列表开始，希望只绑定(bind)最合适的(即，列表中的第一个匹配)。

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

// ^^^^^ your code here

myElem.addEventListener(transitionendName, myHandler, false);

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

编辑: msTransitionEnd 和“-ms-”前缀属性 were removed in one of the final IE10 release candidates .

Answer 1

您可以注册所有事件结束名称，然后触发一个非常短的 CSS 转换并查看触发哪个事件。另外，IE10，使用transitionend，所以没有浏览器使用msTransitionEnd。

这是一个如何做到这一点的例子:http://jsfiddle.net/jfriend00/5Zv9m/

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

function findTransitionEnd(callback) {
    // add an off-screen element
    var elem = document.createElement("div");
    elem.id = "featureTester";
    document.body.appendChild(elem);

    // clean up temporary element when done
    function cleanup() {
        document.body.removeChild(elem);
        elem = null;
    }

    // set fallback timer in case transition doesn't trigger
    var timer = setTimeout(function() {
        if (!transitionendName) {
            cleanup();
            callback("");
        }
    }, 200);

    // register all transition end names
    for (var i = 0; i < events.length; i++) {
        (function(tname) {
            elem.addEventListener(tname, function() {
                if (!transitionendName) {
                    transitionendName = tname;
                    clearTimeout(timer);
                    cleanup();
                    callback(tname);
                }

            });
        })(events[i]);
    }


    // trigger transition
    setTimeout(function() {
        elem.className = "featureTestTransition";
    }, 1);
}