Wie kann ich erkennen, ein übergang, ohne Ende-eine JavaScript-Bibliothek?

Möchte ich ein Objekt löschen, nachdem es fertig ist animierend mit einem CSS-übergang, aber ich bin nicht in der Lage, verwenden eine JavaScript-Bibliothek.

Wie kann ich erkennen, Wann die animation fertig ist? Verwende ich einen Rückruf oder benutzerdefiniertes Ereignis irgendwie?

InformationsquelleAutor Matt Norris | 2012-01-11
  1. 15
    element.addEventListener('transitionend', function(event) {
    alert("CSS Property completed: " + event.propertyName);
}, false );

    Nun das genaue event-name wurde nicht standardisiert. Hier ein Zitat aus MDN:

    Es ist ein einmaliges Ereignis, das ausgelöst wird, wenn übergänge abgeschlossen.

    In allen standard-konformen browser, der Fall ist transitionend,

    in WebKit ist es webkitTransitionEnd.

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

    • Wie ordne ich diese zu einem bestimmten übergang, wie die Deckkraft?
    • Sie kann nicht zuordnen, um einen bestimmten übergang. Vielmehr werden Sie hören, um das Ereignis auslösen, auf das element. Sie erhalten dann die Informationen, die Sie suchen, für die aus dem Ereignis-Objekt. Siehe mein update.
    • Suchen Sie nach "Detektion der Fertigstellung der übergang" auf der Seite Joseph verknüpft. propertyName: Ein string mit dem Namen der CSS-Eigenschaft, deren übergang abgeschlossen. elapsedTime: Ein float, der die Anzahl der Sekunden, die der übergang ausgeführt worden, wenn das event gefeuert. Dieser Wert ist nicht betroffen, indem der Wert des transition-delay .
    InformationsquelleAutor Joseph Silber
  2. 3

    So, ich bin derzeit dabei, die genaue selben Sache, werde ich zu teilen, eine nützliche, cross-browser-Implementierung von einem Marakana tutorial.

       //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 IE10 unterstützt übergänge mit transitionend (siehe MSDN).

    IE9 und unten gehen nicht Unterstützung der übergänge (siehe caniuse.com ), so dass Sie nicht in der Lage sein, entsprechende eventListener zu einem übergang am Ende ( also nicht versuchen msTransitionend oder was auch immer für diese Browser).

    EDIT: Beim Lesen der Modernizr-Dokumentation auf Github ich stolperte auf Ihren cross-browser polyfills Seite. Unter vielen anderen hilfreichen links, die ich fand dieses kleine, aber extrem gute transitionend-Skript.

    Daran, dass die Beispiele in der Github README.md jQuery verwenden, aber die Bibliothek in der Tat erfordert keine Bibliotheken und keine Abhängigkeiten als es ist geschrieben in vanilla javascript.

    InformationsquelleAutor Nobita
  3. 1

    War ich nicht in der Lage zu finden, ein passendes "transitionend' polyfill, die erfüllt meine Anforderungen. Also, wenn Sie möchten etwas zum Einhaken der übergang Ende einmal, verwenden Sie dies:

    (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;
    };
}());
    InformationsquelleAutor SilbinaryWolf
Schreibe einen Kommentar