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

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

95 голосов | спросил Pompair 18 Jpm1000000pmMon, 18 Jan 2010 19:27:33 +030010 2010, 19:27:33

5 ответов


0

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

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

box.addEventListener( 
     'webkitTransitionEnd', 
     function( event ) { 
         alert( "Finished transition!" ); 
     }, false );
ответил Doug Neiner 18 Jpm1000000pmMon, 18 Jan 2010 19:51:31 +030010 2010, 19:51:31
0

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

  • Браузеры 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

ответил Mark Rhodes 6 J000000Friday12 2012, 03:41:29
0

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

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

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

$(".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);
ответил Tom 13 ThuEurope/Moscow2012-12-13T18:51:29+04:00Europe/Moscow12bEurope/MoscowThu, 13 Dec 2012 18:51:29 +0400 2012, 18:51:29
0

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

ответил Brian 6 J000000Friday12 2012, 03:55:51
0

Этого легко достичь с помощью события 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>
ответил Yehuda Schwartz 16 52018vEurope/Moscow11bEurope/MoscowFri, 16 Nov 2018 19:44:31 +0300 2018, 19:44:31

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132