如何在 jQuery 中使用 transitionend？

How do I use transitionend in jQuery?

提问by JacobTheDev

I need to detect if a CSS transition is completed before allowing a function to repeat again, to prevent messing up the margins.

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

So how cam I have something like

所以我怎么会有类似的东西

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

回答by xram

The code below will trigger on the transitionend event for whatever element(s) you have in the $element variable. There are four different event names as I believe these cover all of the cross-browser inconsistencies. Replace the '// your event handler' comment with whatever code you wish to run when the event is triggered.

下面的代码将针对 $element 变量中的任何元素触发 transitionend 事件。有四种不同的事件名称，因为我相信它们涵盖了所有跨浏览器的不一致。用您希望在触发事件时运行的任何代码替换“// 您的事件处理程序”注释。

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

回答by Amin Eshaq

I think this linkmight be helpful to you.

我认为此链接可能对您有所帮助。

There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, OTransitionEnd, and in WebKit it is webkitTransitionEnd.

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

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

回答by Allison A

Use jQuery datato attach stateful data to the element. Use a boolean value to "block" events from happening and flip the boolean variable once transitionend completes. Use xram's code to hook up all cross-browser transitionend events at the same time.

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

So for your example...

所以对于你的例子......

1. onclick set this.data('transitioning', true)
2. when transitionend fires, set this.data('transitioning', false)
3. don't perform animation if this.data('transitioning') == true. this is captured and checked in your click event.

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

回答by Pouya

You can create a method which will keep in mind when the transition end has been called the last time, and thus only trigger the callback once.

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

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

and then simply use it this way

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

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

回答by centurian

I noticed such similar questions like "how do I catch touchend events?"or "mouseup events?"etc.

我注意到诸如“如何捕获 touchend 事件？”之类的类似问题。或“鼠标事件？” 等等。

They are all similar for these points of view

这些观点都相似

1. plural: handlers are fired many times even when we are expecting to be fired by a single event

2. depth: events are bubbling deeper in the tree before our handler catches them.

1. 复数：即使我们期望被单个事件触发，处理程序也会被触发多次

2. depth：事件在我们的处理程序捕获它们之前在树中更深地冒泡。

Examples:

例子：

1. a touchstartcan be followed by a mousedownand vice versa in a device that has both a mouse and a touch screen,

2. a touchendcan be followed by a mouseupfor the similar reasons,

3. a animationstartcan be followed by many other similar events depending on how you wrote the css,

4. a animationendcan also be followed by many similar events for the above reasons as well.

1. 在同时具有鼠标和触摸屏的设备中，atouchstart可以跟在 a 之后，mousedown反之亦然，

2. 出于类似的原因，atouchend可以跟在 a 后面mouseup，

3. aanimationstart后面可以跟许多其他类似的事件，具体取决于您编写 css 的方式，

4. animationend由于上述原因，a之后也可能出现许多类似的事件。

If we need to fire our handler onceper a set of similarevents, i.e. events that produced by a single action like a person that presses sth. we need to introduce an event lockand use 2 handlers one at the beginning of an event and one handler at the end even if we don't need or want a handler of the side event.

如果我们需要为一组类似的事件触发一次我们的处理程序，即由单个动作产生的事件，比如一个人按下某物。我们需要引入一个事件锁并使用 2 个处理程序，一个在事件开始时，一个在事件结束时使用，即使我们不需要或不需要侧事件的处理程序。

The lockcan be a property at the parent node higer in the tree as you guessed.

正如您猜测的那样，锁可以是树中父节点上的一个属性。

For the infamous event couple: animationstart- animationendsuch a function can be:

对于臭名昭著的事件夫妇：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);
      }
   }
})();

and you can call it like:

你可以这样称呼它：

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

The interesting part is that it can runs for either the start or the end of animation:

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

1. 1st arg. a node reference,

2. 2nd arg. a string representing the event for our callback and

3. 3rd arg. our actual callback.

1. 第一个参数。节点引用，

2. 第二个参数。表示回调事件的字符串和

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

jsFiddle

js小提琴