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

Ответ 1

Приведенный ниже код инициирует событие перехода для любого элемента (ов), который у вас есть в переменной $element. Есть четыре разных названия событий, поскольку я считаю, что они охватывают все несоответствия между браузерами. Замените комментарий "//your event handler" любым кодом, который вы хотите запустить при запуске события.

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

Ответ 2

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

При завершении переходов происходит одно событие. В Firefox, событие происходит в Opera, OTransitionEnd и в WebKit это webkitTransitionEnd.

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

Ответ 3

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

Итак, для вашего примера...

• onclick set this.data('transitioning', true)
• при возникновении пожаров в режиме перехода, установите this.data('transitioning', false)
• не выполнять анимацию, если this.data('transitioning') == true. это фиксируется и проверяется в вашем событии click.

Ответ 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');
});