javascript - 如何跨浏览器标准化CSS3 Transition功能？(How do I normalize CSS3 Transition functions across browsers?)

Question

Webkit's transition end event is called webkitTransitionEnd, Firefox is transitionEnd, opera is oTransitionEnd.(Webkit的过渡结束事件称为webkitTransitionEnd，Firefox为transitionEnd，歌剧为oTransitionEnd。)

What is a good way of tackling all of them in pure JS?(用纯JS解决所有问题的好方法是什么？) Should I do browser sniffing?(我应该浏览器嗅探吗？) or implement each one separately?(还是分别实施？) Some other way that hasn't occurred to me?(我还没有发生过其他事情？) ie:(即：) //doing browser sniffing var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd"; element.addEventListener(transitionend, function(){ //do whatever },false); or(要么) // Assigning an event listener per browser element.addEventListener("webkitTransitionEnd", fn); element.addEventListener("oTransitionEnd", fn); element.addEventListener("transitionEnd", fn); function fn() { //do whatever }   ask by methodofaction translate from so

Answer 1

There's a technique used in Modernizr, improved:(在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'; } Then you can just call this function whenever you need the transition end event:(然后，只要需要过渡结束事件，就可以调用此函数：) var transitionEnd = transitionEndEventName(); element.addEventListener(transitionEnd, theFunctionToInvoke, false);