Ereignisse CSS3 Übergang

Question

Gibt es Ereignisse, die von einem Element gefeuert zu prüfen, ob ein css3 Übergang begonnen hat oder Ende?

Answer 1

W3C CSS Transitions Draft

Der Abschluss einer CSS Transition erzeugt ein entsprechendes DOM-Ereignis. Ein Ereignis wird für jede Eigenschaft gebrannt, die einen Übergang durchläuft. Dies ermöglicht es ein Content-Entwickler Aktionen auszuführen, die Synchronisation mit der Vollendung eines Übergangs.

---

Webkit

Um zu bestimmen, wann ein Übergang abgeschlossen ist, eine JavaScript-Event-Listener-Funktion für das DOM-Ereignis festgelegt, die am Ende eines Übergangs gesendet wird. Die Veranstaltung ist eine Instanz von WebKitTransitionEvent, und seine Art ist webkitTransitionEnd.

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

Mozilla

Es gibt ein einzelnes Ereignis, das ausgelöst wird, wenn Übergänge abzuschließen. In Firefox, ist das Ereignis transitionend, in der Oper, oTransitionEnd und in WebKit es webkitTransitionEnd ist.

Opera

Es gibt eine Art von Übergangsereignis verfügbar. Die oTransitionEnd Veranstaltung tritt bei der Beendigung der Übergang.

Internet Explorer

Das transitionend Ereignis tritt bei der Vollendung des Übergangs. Wenn der Übergang vor der Fertigstellung entfernt wird, das Ereignis wird nicht ausgelöst.

---

Stack-Überlauf: Wie normalisieren ich CSS3 Transition Funktionen über Browser?

Answer 2

Ich war mit dem Ansatz von Pete gegeben, aber ich habe jetzt begonnen, die folgende mit

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

---

Alternativ, wenn Sie verwenden Bootstrap dann können Sie einfach tun

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

Dies ist deswegen, sie umfassen die folgenden in 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);

Beachten sie auch eine emulateTransitionEnd Funktion enthalten, die benötigt werden, um einen Rückruf, um sicherzustellen, immer auftritt.

  // 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 manchmal dieses Ereignis nicht Feuer der Fall ist, in der Regel im Fall wenn Eigenschaften nicht ändern oder eine Farbe wird nicht ausgelöst. Um sicherzustellen, dass wir immer einen Rückruf erhalten, setzen wir ein Timeout, das das Ereignis ausgelöst werden manuell.

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

Answer 3

All modern browsers now support the unprefixed event:

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

Works in the latest versions of Chrome, Firefox and Safari. Even IE10+.

Answer 4

In Opera 12 when you bind using the plain JavaScript, 'oTransitionEnd' will work:

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

however if you bind through jQuery, you need to use 'otransitionend'

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

In case you are using Modernizr or bootstrap-transition.js you can simply do a change:

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

You can find some info here as well http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/

Answer 5

Just for fun, don't do this!

$.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

If you simply want to detect only a single transition end, without using any JS framework here's a little convenient utility function:

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

Usage:

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

then if you wish to cancel at some point you can still do it with

handler.cancel();

It's good for other event usages as well :)