如何在jQuery中使用transitionend？

Question

我需要在允许函数再次重复之前检测CSS转换是否已完成,以防止搞乱边距.

那么我有多喜欢的东西

if (transitionend == true) {
  // do stuff
} else {
  // do nothing
}

Answer 1

对于$ element变量中的任何元素,下面的代码将触发transitionend事件.有四种不同的事件名称,我相信它们涵盖了所有跨浏览器的不一致性.将"// your events handler"注释替换为触发事件时要运行的任何代码.

$element.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
    // your event handler
});

这是这个帖子中最好的答案,因为原来的人要求**jQuery**.我很难过,人们抱怨"添加一个解释"代码本身是不言自明的(假设你最初刚刚粘贴代码) (8认同)
使用`$ element.one`而不是`$ element.on`来阻止它多次执行 (6认同)
otransitionend重复.其中一个应该是mstransitionend来支持IE. (2认同)
您现在唯一需要收听的事件是标准的"transitionend":它在Chrome 36 +,WebKit 7.0.6+和Opera 12.10+中得到支持.[IE仍然遇到许多问题但你不需要ms-前缀.](http://caniuse.com/#feat=css-transitions) (2认同)

Answer 2

我认为这个链接可能对您有所帮助.

转换完成时会触发一个事件.在Firefox中,事件是transitionend,在Opera,OTransitionEnd和WebKit中是webkitTransitionEnd.

el.addEventListener("transitionend", updateTransition, true);