Обратный вызов при переходе CSS

Question

Возможно ли получить уведомление (например, обратный вызов), когда переход CSS был завершен?

Answer 1

Я знаю, что Safari реализует webkitTransitionEnd Веб - переход обратный вызов, который вы можете прикрепить непосредственно к элементу с переходом.

Их пример (переформатирован в несколько строк):

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

Answer 2

Да, если такие вещи поддерживаются браузером, то при завершении перехода запускается событие.Однако фактическое событие отличается в разных браузерах:

• Браузеры Webkit (Chrome, Safari) используют webkitTransitionEnd
• Firefox использует transitionend
• IE9+ использует msTransitionEnd
• Opera использует oTransitionEnd

Однако вы должны знать, что webkitTransitionEnd не всегда срабатывает!Это несколько раз приводило меня в замешательство и, похоже, происходит, если анимация не оказывает никакого влияния на элемент.Чтобы обойти это, имеет смысл использовать тайм-аут для запуска обработчика события в случае, если оно было запущено не так, как ожидалось.Запись в блоге об этой проблеме доступна здесь: http://www.cuppadev.co.uk/the-trouble-with-css-transitions/ <-- 500 Внутренняя ошибка сервера

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

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

Примечание:чтобы получить конечное имя события перехода, вы можете использовать метод, опубликованный в качестве ответа в:Как мне нормализовать функции перехода CSS3 в разных браузерах?.

Примечание:этот вопрос также связан с:- События перехода CSS3

Answer 3

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

$(".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 (  ._.)
  }

  // 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
  }

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

}(jQuery);

Answer 4

В Плагин jQuery.transit, плагин для преобразований и переходов CSS3, может вызывать ваши CSS-анимации из скрипта и выдавать вам обратный вызов.

Answer 5

Это может быть легко достигнуто с помощью transitionend Событие смотрите документацию здесь Простой пример:

document.getElementById("button").addEventListener("transitionend", myEndFunction);

function myEndFunction() {
	this.innerHTML = "Transition event ended";
}

#button {transition: top 2s; position: relative; top: 0;}

<button id="button" onclick="this.style.top = '55px';">Click me to start animation</button>