Wie erkenne ich ein Übergangsende ohne JavaScript -Bibliothek?

Question

Ich möchte ein Objekt löschen, nachdem es mit einem CSS -Übergang animiert wurde, aber ich kann keine JavaScript -Bibliothek verwenden.

Wie erfasse ich, wann die Animation erledigt ist? Benutze ich a zurückrufen oder Benutzerdefinierte Veranstaltung irgendwie?

Answer 1

element.addEventListener('transitionend', function(event) {
    alert("CSS Property completed: " + event.propertyName);
}, false );

Derzeit ist der genaue Ereignisname nicht standardisiert. Hier ist ein Zitat von Mdn:

Es gibt ein einzelnes Ereignis, das abgefeuert wird, wenn Übergänge abgeschlossen sind.
In allen Standard-konformen Browser ist die Veranstaltung transitionend,
In Webkit ist es webkitTransitionEnd.

Hier ist die Geige für Webkit: http://jsfiddle.net/bngwy/

Answer 2

Da ich derzeit genau das gleiche mache, werde ich eine nützliche Cross-Browser-Implementierung von a teilen Marakana Lernprogramm.

   // First, we store the names of the event according to the browsers

   var navigatorsProperties=['transitionend','OTransitionEnd','webkitTransitionEnd'];

            //For each of them...
            for(var i in navigatorsProperties)
            {
                //We attach it to our overlay div
                el.addEventListener(navigatorsProperties[i],function()
                {
                    // Here's the code we want to fire at transition End
                      console.log('transition end');

                },false);
            }

Es ist zu beachten, dass das IE10 Unterstützt Übergänge mit transitionend (sehen Msdn).

Dh9 und unten nicht Unterstützen Sie Übergänge (siehe caniuse.com ) Sie können also kein Eventlistener an ein Übergangsende anhängen (versuchen Sie es also nicht msTransitionend oder was auch immer für diese Browser).

BEARBEITEN: Beim Lesen der Modernizr-Dokumentation zu Github stolperte ich auf ihre Cross-Browser-Polyfills-Seite. Unter vielen anderen nützlichen Links fand ich dieses kleine, aber extrem gut Übergangsskript.

Denken Sie daran, dass die Beispiele im GitHub Readme.md JQuery verwenden, aber die Bibliothek erfordert in der Tat Keine Bibliotheken und Keine Abhängigkeiten wie es in Vanille JavaScript geschrieben ist.

Answer 3

Ich konnte keine geeignete "Transitionend" -Polyfonie finden, die meine Anforderungen entsprach. Wenn Sie also etwas zum Anschließen des Übergangsendees möchten, verwenden Sie Folgendes:

(function() {
    var i,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

    var transitionEnd = '';
    for (i in transitions) {
        if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
            transitionEnd = transitions[i];
            break;
        }
    }

    Object.prototype.onTransitionEndOnce = function(callback) {
        if (transitionEnd === '') {
            callback();
            return this;
        }
        var transitionEndWrap = function(e) {
            callback(); 
            e.target.removeEventListener(e.type, transitionEndWrap);
        };
        this.addEventListener(transitionEnd, transitionEndWrap);
        return this;
    };
}());