web-dev-qa-db-ger.com

CSS3-Übergangsereignisse

Gibt es Ereignisse, die von einem Element ausgelöst werden, um zu überprüfen, ob ein CSS3-Übergang gestartet oder beendet wurde?

187

W3C CSS Transitions Draft

Der Abschluss eines CSS-Übergangs generiert ein entsprechendes DOM-Ereignis. Für jede Eigenschaft, die einen Übergang durchläuft, wird ein Ereignis ausgelöst. Auf diese Weise kann ein Inhaltsentwickler Aktionen ausführen, die mit dem Abschluss eines Übergangs synchronisiert werden.


Webkit

Um festzustellen, wann ein Übergang abgeschlossen ist, legen Sie eine JavaScript-Ereignis-Listener-Funktion für das DOM-Ereignis fest, das am Ende eines Übergangs gesendet wird. Das Ereignis ist eine Instanz von WebKitTransitionEvent und hat den Typ webkitTransitionEnd.

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

Mozilla

Es gibt ein einzelnes Ereignis, das nach Abschluss der Übergänge ausgelöst wird. In Firefox ist das Ereignis transitionend, in Opera oTransitionEnd und in WebKit webkitTransitionEnd.

Opera

Es ist eine Art von Übergangsereignis verfügbar. Das Ereignis oTransitionEnd tritt nach Abschluss des Übergangs auf.

Internet Explorer

Das Ereignis transitionend tritt nach Abschluss des Übergangs auf. Wenn der Übergang vor dem Abschluss entfernt wird, wird das Ereignis nicht ausgelöst.


Stapelüberlauf: Wie normalisiere ich CSS3 Transition-Funktionen über Browser hinweg?

210
Davor Lucic

Ich habe den Ansatz von Pete verwendet, aber jetzt habe ich begonnen, den folgenden zu verwenden

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

Wenn Sie alternativ bootstrap verwenden, können Sie dies einfach tun

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

Dies liegt daran, dass die folgenden Elemente in bootstrap.js enthalten sind

+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);

Beachten Sie, dass sie auch eine Funktion emulateTransitionEnd enthalten, die möglicherweise erforderlich ist, um sicherzustellen, dass immer ein Rückruf erfolgt.

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

Beachten Sie, dass dieses Ereignis manchmal nicht ausgelöst wird. Dies ist normalerweise der Fall, wenn sich die Eigenschaften nicht ändern oder kein Paint ausgelöst wird. Um sicherzustellen, dass wir immer einen Rückruf erhalten, legen wir eine Zeitüberschreitung fest, die das Ereignis manuell auslöst.

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

70
Tom

Alle modernen Browser jetzt unterstützt das unvorhergesehene Ereignis:

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

Funktioniert in den neuesten Versionen von Chrome, Firefox und Safari. Sogar IE10 +.

58
neave

In Opera 12 funktioniert 'oTransitionEnd', wenn Sie mit einfachem JavaScript binden:

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

wenn Sie jedoch über jQuery binden, müssen Sie "otransitionend" verwenden.

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

Wenn Sie Modernizr oder bootstrap-transition.js verwenden, können Sie einfach eine Änderung vornehmen:

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

Hier finden Sie auch einige Informationen http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

16
Peter

Nur zum Spaß, mach das nicht!

$.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');
});
6
yckart

Wenn Sie nur ein einziges Übergangsende erkennen möchten, ohne ein JS-Framework zu verwenden, finden Sie hier eine praktische Hilfefunktion:

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

Verwendung:

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

dann, wenn Sie irgendwann stornieren möchten, können Sie es immer noch mit tun

handler.cancel();

Es ist auch gut für andere Eventnutzungen :)

3
OpherV