Как использовать переход в jQuery?

Приведенный ниже код будет срабатывать по событию перехода для любого элемента (элементов), который у вас есть в переменной $element. Существует четыре разных названия событий, поскольку я считаю, что они охватывают все несоответствия между браузерами. Замените комментарий «// ваш обработчик событий» любым кодом, который вы хотите запустить при запуске события.

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

Я думаю, что эта ссылка может быть вам полезна.

Существует одно событие, которое запускается при завершении переходов. В Firefox это событие — transitionend, в Opera — OTransitionEnd, а в WebKit — webkitTransitionEnd.

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

Используйте данные jQuery, чтобы прикрепить к элементу данные с отслеживанием состояния. Используйте логическое значение, чтобы «заблокировать» события, и переверните логическую переменную после завершения перехода. Используйте код xram для одновременного подключения всех событий перехода между браузерами.

Итак, на вашем примере...

1. onclick установить this.data («переход», правда)
2. когда срабатывает переход, установите this.data('transitioning', false)
3. не выполнять анимацию, если this.data('transitioning') == true. это фиксируется и проверяется в вашем событии клика.

Вы можете создать метод, который будет помнить, когда конец перехода был вызван в последний раз, и, таким образом, вызовет обратный вызов только один раз.

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

Я заметил такие похожие вопросы, как "как мне перехватывать события touchend?" или "события mouseup?" и т. д.

Они все похожи для этих точек зрения

1. множественное число: обработчики запускаются много раз, даже если мы ожидаем, что они будут запущены одним событием.

2. глубина: события всплывают глубже в дереве, прежде чем наш обработчик их поймает.

Примеры:

1. за touchstart может следовать mousedown и наоборот на устройстве с мышью и сенсорным экраном,

2. за touchend может следовать mouseup по тем же причинам,

3. за animationstart может следовать множество других подобных событий в зависимости от того, как вы написали css,

4. за animationend также может следовать множество подобных событий по вышеуказанным причинам.

Если нам нужно запустить наш обработчик один раз для набора похожих событий, т. е. событий, вызванных одним действием, например, когда человек нажимает sth. нам нужно ввести блокировку событий и использовать 2 обработчика: один в начале события и один в конце, даже если нам не нужен или не нужен обработчик побочного события< /сильный>.

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(){...});