如何标准化跨浏览器的CSS3转换函数？
如何标准化跨浏览器的CSS3转换函数？
提问于 2011-02-17 07:33:29
Webkit的转换结束事件称为webkitTransitionEnd，火狐是transitionEnd，opera是oTransitionEnd。在纯JS中解决所有这些问题的好方法是什么？我应该做浏览器嗅探吗？或者分别实现每一个？另一种我没想到的方式？
即：
//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";
element.addEventListener(transitionend, function(){
//do whatever
},false);或
// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);
function fn() {
//do whatever
}回答 9
Stack Overflow用户
回答已采纳
发布于 2012-02-01 10:57:42
在Modernizr中使用了一种技术，经过改进：
function transitionEndEventName () {
var i,
undefined,
el = document.createElement('div'),
transitions = {
'transition':'transitionend',
'OTransition':'otransitionend', // oTransitionEnd in very old Opera
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
for (i in transitions) {
if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
return transitions[i];
}
}
//TODO: throw 'TransitionEnd event is not supported in this browser';
}然后，只要需要转换结束事件，就可以调用此函数：
var transitionEnd = transitionEndEventName();
element.addEventListener(transitionEnd, theFunctionToInvoke, false);Stack Overflow用户
发布于 2011-10-13 18:08:51
根据Matijs的评论，检测转换事件的最简单方法是使用库，在本例中为jquery：
$("div").bind("webkitTransitionEnd.done oTransitionEnd.done otransitionend.done transitionend.done msTransitionEnd.done", function(){
// Unlisten called events by namespace,
// to prevent multiple event calls. (See comment)
// By the way, .done can be anything you like ;)
$(this).off('.done')
});在无库的javascript中，它变得有点冗长：
element.addEventListener('webkitTransitionEnd', callfunction, false);
element.addEventListener('oTransitionEnd', callfunction, false);
element.addEventListener('transitionend', callfunction, false);
element.addEventListener('msTransitionEnd', callfunction, false);
function callfunction() {
//do whatever
}Stack Overflow用户
发布于 2015-04-12 01:39:08
从2015年起，这一行代码应该可以完成交易(IE 10+，Chrome 1+，Safari 3.2+，FF 4+和Opera 12+)：
var transEndEventName = ('WebkitTransition' in document.documentElement.style) ? 'webkitTransitionEnd' : 'transitionend'附加事件侦听器很简单：-
element.addEventListener(transEndEventName , theFunctionToInvoke);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5023514
复制相关文章
相似问题