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

Answer 2

我认为这link可能会对您有所帮助。

转换完成时会触发一个事件。在 Firefox，事件是转发，在Opera，OTransitionEnd和 WebKit是webkitTransitionEnd。

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

Answer 3

使用jQuery data将有状态数据附加到元素。使用布尔值“阻止”事件发生，并在transitionend完成后翻转布尔变量。使用xram的代码同时连接所有跨浏览器的transitionend事件。

所以你的例子......

onclick设置this.data（'transitioning'，true）
当transitionend触发时，设置this.data（'transitioning'，false）
如果this.data（'transitioning'）== true，则不执行动画。这是在您的点击事件中捕获并检查的。

Answer 4

您可以创建一个方法，在最后一次调用转换结束时记住该方法，因此只触发一次回调。

function transitionEndsOnce($dom, callback) {
  var tick = Date.now();
  $dom.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(e) {
    var diff = Date.now() - tick;
    tick = Date.now();
    if (diff > 20) { // this number can be changed, but normally all the event trigger are done in the same time
      return callback && callback(e);
    }
  });
}

然后简单地以这种方式使用

transitionEndsOnce($('...'), function(e){
  console.log('transition ends once');
});

Answer 5

我注意到类似的问题，例如“如何捕获触摸事件？” 或“鼠标事件？” 等。

从这些角度来看，它们都是相似的

复数：即使我们希望被单个事件触发，处理程序也会被多次触发
深度：事件在我们的处理程序捕获到事件之前在树中冒泡了。

示例：

在touchstart之后跟着mousedown，反之亦然，
在touchend之后可以加上mouseup，
animationstart之后可能还有许多其他类似事件，具体取决于您编写CSS的方式，
a animationend也可能跟随许多类似事件。

如果我们需要根据一组相似事件（即由按下某人的单个动作产生的事件）一次解雇处理程序。我们需要引入一个事件锁，并在事件开始时使用2个处理程序，在事件结束时使用一个处理程序，即使我们不需要或不需要附带事件的处理程序< / strong>。

锁可以是您猜中的树中父节点上的一个属性。

对于臭名昭著的事件对：animationstart-animationend来说，这样的功能可以是：

var oneTransition = (function(){ var $parent, type, callback, unlockCallback, newCallback, start = 'webkitTransitionStart otransitionstart oTransitionStart msTransitionStart transitionstart', end = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend'; unlockCallback = function(){ $parent.data('oneTransitionLock', false); }; newCallback = function(e){ if($parent.data('oneTransitionLock')) return; else $parent.data('oneTransitionLock', true); callback(e); }; return function(){ var args = Array.prototype.slice.call(arguments, 0); $parent = $(args[0]); // 1st arg type = args[1]; // 2nd arg callback = args[2]; // 3rd arg if((args.length < 3) || ((type != 'start') && (type != 'end')) || (typeof(callback) != 'function')) return; $parent.off(start).off(end); if(type == 'start'){ $parent.data('oneTransitionLock', false); $parent.on(start, newCallback); $parent.on(end, unlockCallback); }else if(type == 'end'){ $parent.on(start, unlockCallback); $parent.on(end, newCallback); } } })();

，您可以这样称呼它：

oneTransition(node, 'start' or 'end', funcion(){...});

有趣的部分是它可以在动画的开始或结束时运行：

第一个参数。节点引用

第二个参数。一个字符串，代表我们的回调和

的事件

第三个参数。我们的实际回调。

jsFiddle

如何在jQuery中使用transitionend？

5 个答案: