Ich habe ein DOM-Element mit einigen / allen der folgenden angewendeten Effekte:
#elem {
-webkit-transition: height 0.4s ease;
-moz-transition: height 0.4s ease;
-o-transition: height 0.4s ease;
transition: height 0.4s ease;
}
Ich schreibe ein jQuery-Plugin, dessen Größe sich ändert. Ich muss diese Effekte vorübergehend deaktivieren, damit ich die Größe problemlos ändern kann.
Was ist die eleganteste Methode, um diese Effekte vorübergehend zu deaktivieren (und dann wieder zu aktivieren), da sie möglicherweise von den Eltern angewendet werden oder überhaupt nicht angewendet werden.
javascript
jquery
css
Sam Safran
quelle
quelle
.notransition
Klasse hinzu. Es wäre vernünftiger, es umgekehrt zu machen, dh#elem.yestransition
mit Ihrem CSS zu zielen und diese Klasse zu entfernen. Das beseitigt böse*
s in Ihrem CSS.Antworten:
Kurze Antwort
Verwenden Sie dieses CSS:
Plus entweder diese JS (ohne jQuery) ...
Oder dieses JS mit jQuery ...
... oder gleichwertiger Code mit einer anderen Bibliothek oder einem anderen Framework, mit dem Sie arbeiten.
Erläuterung
Dies ist eigentlich ein ziemlich subtiles Problem.
Zunächst möchten Sie wahrscheinlich eine 'notransition'-Klasse erstellen, die Sie auf Elemente anwenden können, um deren
*-transition
CSS-Attribute festzulegennone
. Zum Beispiel:(Nebenbei bemerkt - beachten Sie das Fehlen eines
-ms-transition
In. Sie benötigen es nicht. Die erste Version von Internet Explorer, die Übergänge überhaupt unterstützt, war IE 10, die sie ohne Fix unterstützt.)Aber das ist nur Stil und das ist das Einfache. Wenn Sie versuchen, diese Klasse zu verwenden, stoßen Sie auf eine Falle. Die Falle ist, dass Code wie dieser nicht so funktioniert, wie Sie es naiv erwarten könnten:
Naiv könnte man denken, dass die Änderung der Höhe nicht animiert wird, da dies geschieht, während die Klasse 'notransition' angewendet wird. In Wirklichkeit aber ist es werden animiert werden, zumindest in allen modernen Browsern habe ich versucht. Das Problem ist, dass der Browser die Stiländerungen zwischenspeichert, die er vornehmen muss, bis das JavaScript vollständig ausgeführt wird, und dann alle Änderungen in einem einzigen Reflow vornimmt. Infolgedessen wird ein Reflow durchgeführt, bei dem sich nicht netto ändert, ob Übergänge aktiviert sind oder nicht, sondern die Höhe netto geändert wird. Folglich wird die Höhenänderung animiert.
Sie könnten denken, ein vernünftiger und sauberer Weg, um dies zu umgehen, wäre, das Entfernen der 'notransition'-Klasse in eine Zeitüberschreitung von 1 ms wie folgt einzuschließen:
aber das funktioniert auch nicht zuverlässig. Ich konnte den obigen Code in WebKit-Browsern nicht brechen, aber auf Firefox (sowohl auf langsamen als auch auf schnellen Computern) wird manchmal (scheinbar zufällig) das gleiche Verhalten wie bei der Verwendung des naiven Ansatzes angezeigt. Ich denke, der Grund dafür ist, dass die JavaScript-Ausführung möglicherweise so langsam ist, dass die Timeout-Funktion auf die Ausführung wartet, wenn der Browser inaktiv ist, und ansonsten über einen opportunistischen Reflow nachdenken würde. Wenn dieses Szenario eintritt, Firefox führt die Funktion in der Warteschlange vor dem Reflow aus.
Die einzige Lösung, die ich für das Problem gefunden habe, besteht darin , einen Reflow des Elements zu erzwingen und die daran vorgenommenen CSS-Änderungen zu löschen, bevor die Klasse 'notransition' entfernt wird. Es gibt verschiedene Möglichkeiten, dies zu tun - siehe hier für einige. Das, was einer Standardmethode am nächsten kommt, ist das Lesen der
offsetHeight
Eigenschaft des Elements.Eine Lösung, die tatsächlich funktioniert, ist
Hier ist eine JS-Geige, die die drei möglichen Ansätze veranschaulicht, die ich hier beschrieben habe (sowohl den einen erfolgreichen als auch die beiden erfolglosen): http://jsfiddle.net/2uVAA/131/
quelle
Fügen Sie eine zusätzliche CSS-Klasse hinzu, die den Übergang blockiert, und entfernen Sie sie, um zum vorherigen Status zurückzukehren. Dies macht sowohl CSS- als auch JQuery-Code kurz, einfach und verständlich.
CSS :
!important
wurde hinzugefügt, um sicherzustellen, dass diese Regel mehr "Gewicht" hat, da ID normalerweise spezifischer als Klasse ist.JQuery :
quelle
Ich würde empfehlen, die Animation zu deaktivieren, wie von DaneSoul vorgeschlagen, aber den Wechsel global zu gestalten:
.notransition
kann dann auf dasbody
Element angewendet werden , wodurch alle Übergangsanimationen auf der Seite effektiv überschrieben werden:quelle
Für eine reine JS-Lösung (keine CSS-Klassen) setzen Sie einfach
transition
auf'none'
. Um den im CSS angegebenen Übergang wiederherzustellen, setzen Sie dentransition
auf eine leere Zeichenfolge.Wenn Sie Herstellerpräfixe verwenden, müssen Sie diese ebenfalls festlegen.
quelle
Mit diesem CSS-Code können Sie Animationen, Übergänge und Transformationen für alle Elemente auf der Seite deaktivieren
quelle
Ich denke, Sie könnten eine separate CSS-Klasse erstellen, die Sie in folgenden Fällen verwenden können:
Dann würden Sie in jQuery die Klasse wie folgt umschalten:
quelle
Wenn Sie eine einfache No-JQuery-Lösung wünschen, um alle Übergänge zu verhindern:
quelle
Wenn Sie CSS-Übergänge, -Transformationen und -Animationen von der aktuellen Webseite entfernen möchten, können Sie einfach dieses kleine Skript ausführen, das ich geschrieben habe (in der Browserkonsole):
Es verwendet vanillaJS, um diese CSS-Datei zu laden . Hier ist auch ein Github-Repo, falls Sie dies im Zusammenhang mit einem Scraper (Ruby-Selenium) verwenden möchten: remove-CSS-animations-repo
quelle
tut
in deinem js es töten?
offensichtlich für jeden wiederholen.
quelle
Ich hätte eine Klasse in Ihrem CSS wie folgt:
und dann in Ihrer jQuery:
quelle
#elem.no-transition
in Ihrem CSS nicht gezielt , sondern nur gezielt.no-transition
. Vielleicht wollten Sie#elem.no-transition
in Ihr CSS schreiben ?