我正在寻找一种更清晰的方法来检测转发端的实际名称.我已经看到很多例子只是强力添加处理程序到所有的变化.另外,我不想依赖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);
}
