css3 – transtionend / animationend事件的特征检测？

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

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

var transitionendName,events = [
        'transitionend','webkittransitionend','Moztransitionend','otransitionend'
    ];

// ^^^^^ your code here

myElem.addEventListener(transitionendName,myHandler,false);

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

编辑：mstransitionend和’-ms-‘前缀属性were removed in one of the final IE10 release candidates.

解决方法

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

以下是如何执行此操作的示例：http://jsfiddle.net/jfriend00/5Zv9m/

var transitionendName,'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);
}

原文地址：https://www.jb51.cc/css/242224.html