Das Übergangsendeereignis von Webkit heißt webkitTransitionEnd, Firefox ist TransitionEnd, die Oper ist oTransitionEnd. Was ist ein guter Weg, um sie alle in reinem JS anzugehen? Soll ich Browser schnüffeln? oder jedes einzeln implementieren? Ein anderer Weg, der mir nicht in den Sinn gekommen ist?
dh:
//doing browser sniffing
var transitionend = (isSafari) ? "webkitTransitionEnd" : (isFirefox) ? "transitionEnd" : (isOpera) ? "oTransitionEnd";
element.addEventListener(transitionend, function(){
//do whatever
},false);
oder
// Assigning an event listener per browser
element.addEventListener("webkitTransitionEnd", fn);
element.addEventListener("oTransitionEnd", fn);
element.addEventListener("transitionEnd", fn);
function fn() {
//do whatever
}
javascript
css
css-transitions
dom-events
Methode der Aktion
quelle
quelle
Antworten:
In Modernizr wird eine Technik verwendet, die verbessert wurde:
Dann können Sie diese Funktion einfach aufrufen, wann immer Sie das Übergangsende-Ereignis benötigen:
quelle
transition
undtransitionend
sind genug. Siehe: caniuse.com/#search=transitionsundefined
?Laut Matijs Kommentar ist der einfachste Weg, Übergangsereignisse zu erkennen, eine Bibliothek, in diesem Fall jquery:
In bibliothekslosem Javascript wird es etwas ausführlich:
quelle
msTransitionend
wird hier nicht benötigt.Aktualisieren
Das Folgende ist eine sauberere Methode und erfordert keine Modernisierung
Alternative
Dies basiert auf dem von Modernizr vorgeschlagenen Code, jedoch mit dem zusätzlichen Ereignis für neuere Versionen von Opera.
http://modernizr.com/docs/#prefixed
quelle
one
stattdessen habenon
. Es war so offensichtlich!Wenn Sie jQuery verwenden, gibt Bootstrap
$.support.transition.end
das richtige Ereignis für den aktuellen Browser zurück.Es wird in Bootstrap definiert und in seinen Animationsrückrufen verwendet , obwohl die jQuery-Dokumente sagen, dass Sie sich nicht auf diese Eigenschaften verlassen sollen:
quelle
Ab 2015 sollte dieser Einzeiler den Deal machen (IE 10+, Chrome 1+, Safari 3.2+, FF 4+ und Opera 12+): -
Das Anhängen des Ereignis-Listeners ist einfach: -
quelle
transitionend
nicht unterstützt wird:var transEndEventName = ('WebkitTransition' in document.documentElement.style) ? 'webkitTransitionEnd' : ('transitionend' in document.documentElement.style) ? 'transitionend' : false;
Und dann machen Sie eine einfache Überprüfung:if(transEndEventName) element.addEventlistener(transEndEventName, theFunctionToInvoke)
Der zweite ist der richtige Weg. In jedem Browser wird nur eines dieser Ereignisse ausgelöst, sodass Sie alle festlegen können und es funktioniert.
quelle
Hier ist ein sauberer Weg
quelle
Google Closure stellt sicher, dass Sie dies nicht tun müssen. Wenn Sie ein Element haben:
Wenn Sie sich die Quelle von goog.events.eventtype.js ansehen, wird TRANSITIONEND anhand des Benutzeragenten berechnet:
quelle
Ich benutze Code wie diesen (mit jQuery)
Auf diese Weise kann ich JS verwenden, um Dinge hinzuzufügen, indem ich vP spezifiziere, das mit der Eigenschaft übereinstimmt, und wenn es keinen Browser trifft, wird nur der Standard verwendet. Die Ereignisse lassen mich einfach so binden:
quelle
object.bind('transitionend oTransitionEnd webkitTransitionEnd', function() { // callback } );
transitionend
, nichtTransitionEnd
.jquery override:
und Verwendung wie:
quelle
Die akzeptierte Antwort ist korrekt, aber Sie müssen dieses Element nicht immer wieder neu erstellen und ...
Erstellen Sie eine globale Variable und fügen Sie die Funktion (en) hinzu:
quelle