CSS3 Переходные события

Question

Есть ли какие-либо события, выпущенные элементом для проверки перехода CSS3, началось или заканчивается?

Answer 1

W3C CSS переходные черновики

Завершение перехода CSS генерирует соответствующее событие DOM. Событие уволено для каждого свойства, которое претерпевает переход. Это позволяет разработчику содержимого выполнять действия, которые синхронизируются с завершением перехода.

---

Webkit.

Чтобы определить, когда переход завершится, установите функцию прослушивателя событий JavaScript для события DOM, которое отправляется в конце перехода. Событие является экземпляром WebKittransitionEvent, и его тип webkitTransitionEnd.

box.addEventListener( 'webkitTransitionEnd', 
    function( event ) { alert( "Finished transition!" ); }, false );

Mozilla

Существует одно событие, которое уволено, когда переходы завершены. В Firefox событие transitionend, в опере, oTransitionEnd, а в webkit это webkitTransitionEnd.

Опера

Существует один тип переходного события. То oTransitionEnd событие происходит при завершении перехода.

Internet Explorer

То transitionend событие происходит при завершении перехода. Если переход удален до завершения, событие не будет огонь.

---

Переполнение стека: Как мне нормализовать переход CSS3 в браузерах?

Answer 2

Я использовал подход, данный Пит, однако я сейчас начал использовать следующие

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() {
 //do something
});

---

В качестве альтернативы, если вы используете Bootstrap, вы можете просто сделать

$(".myClass").one($.support.transition.end,
function() {
 //do something
});

Это потому, что они включают в себя следующее в Bootstrap.js

+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      'WebkitTransition' : 'webkitTransitionEnd',
      'MozTransition'    : 'transitionend',
      'OTransition'      : 'oTransitionEnd otransitionend',
      'transition'       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)
  }


  $(function () {
    $.support.transition = transitionEnd()
  })

}(jQuery);

Обратите внимание, что они также включают в себя функцию эмуляционной связи, которая может потребоваться, чтобы гарантировать, что обратный вызов всегда возникает.

  // http://blog.alexmaccaw.com/css-transitions
  $.fn.emulateTransitionEnd = function (duration) {
    var called = false, $el = this
    $(this).one($.support.transition.end, function () { called = true })
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    setTimeout(callback, duration)
    return this
  }

Помните, что иногда это событие не огонь, обычно в случае, когда свойства не меняются, или краска не срабатывает. Чтобы убедиться, что мы всегда получаем обратный вызов, давайте установим время ожидания, которое запускает событие вручную.

http://blog.alexmaccaw.com/css-transitions.

Answer 3

Все современные браузеры Теперь поддержка Непредельное событие:

element.addEventListener('transitionend', callback, false);

Работает в последних версиях Chrome, Firefox и Safari. Даже IE10 +.

Answer 4

В Opera 12, когда вы связываете, используя простой JavaScript, «Отранссудят» будет работать:

document.addEventListener("oTransitionEnd", function(){
    alert("Transition Ended");
});

Однако, если вы связываете через jQuery, вам нужно использовать «отрансветный»

$(document).bind("otransitionend", function(){
    alert("Transition Ended");
});

Если вы используете Modernizr или Bootstrap-Transition.js, вы можете просто сделать изменение:

var transEndEventNames = {
    'WebkitTransition' : 'webkitTransitionEnd',
    'MozTransition'    : 'transitionend',
    'OTransition'      : 'oTransitionEnd otransitionend',
    'msTransition'     : 'MSTransitionEnd',
    'transition'       : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

Вы можете найти некоторую информацию здесь http://www.ianlunn.co.uk/blog/articles/Opera-12-otransioningend-bugs-andoworkarounds/

Answer 5

Просто для удовольствия, не делай этого!

$.fn.transitiondone = function () {
  return this.each(function () {
    var $this = $(this);
    setTimeout(function () {
      $this.trigger('transitiondone');
    }, (parseFloat($this.css('transitionDelay')) + parseFloat($this.css('transitionDuration'))) * 1000);
  });
};


$('div').on('mousedown', function (e) {
  $(this).addClass('bounce').transitiondone();
});

$('div').on('transitiondone', function () {
  $(this).removeClass('bounce');
});

Answer 6

Если вы просто хотите обнаружить только один конец перехода, без использования кадров JS вот небольшая удобная функция утилиты:

function once = function(object,event,callback){
    var handle={};

    var eventNames=event.split(" ");

    var cbWrapper=function(){
        eventNames.forEach(function(e){
            object.removeEventListener(e,cbWrapper, false );
        });
        callback.apply(this,arguments);
    };

    eventNames.forEach(function(e){
        object.addEventListener(e,cbWrapper,false);
    });

    handle.cancel=function(){
        eventNames.forEach(function(e){
            object.removeEventListener(e,cbWrapper, false );
        });
    };

    return handle;
};

Применение:

var handler = once(document.querySelector('#myElement'), 'transitionend', function(){
   //do something
});

Тогда, если вы хотите отменить в какой-то момент, вы все равно можете сделать это с

handler.cancel();

Это хорошо для других использования событий, а также :)