怎么跨浏览器标准化CSS3转换结束事件?

本教程将介绍如何跨浏览器标准化CSS3转换结束事件?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

怎么跨浏览器标准化CSS3转换结束事件? 教程 第1张

问题描述

Webkit的转换结束事件称为webkitTransitionEnd,Firefox为TransitionEnd,Opera为oTransformtionEnd。用纯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
}

推荐答案

Modelnizr中使用了一种改进的技术:

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);

好了关于怎么跨浏览器标准化CSS3转换结束事件?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。