Manchmal stoße ich auf Fälle, in denen ich mehrere Änderungen unmittelbar nacheinander auf das CSS anwenden möchte, und stelle sicher, dass jeder vom Renderer registriert wird.
Hier ist ein vereinfachtes Beispiel
Die Höhe des Elements ist automatisch und kann daher nicht geändert werden. Also würde ich die Höhe der Elemente auf die aktuelle berechnete Höhe setzen und dann sofort die Klasse ändern, um den Übergang zu starten. Wenn dies in der nächsten Codezeile geschieht, hat der CSS-Renderer keine Zeit, auf die erste Änderung zu reagieren, und es ist, als ob nur die Klasse geändert würde - & gt; kein Übergang.
%Vor% Wir können auf den kleinsten animierbaren Zeitschritt mit window.requestAnimationFrame() verzögern, aber aufgrund von Browserunterschieden benötigen diese bereits zwei verschachtelte Aufrufe, um Firefox zu unterstützen.
Technisch funktioniert dieser Code. Ich frage mich nur, ob dies wirklich der beste Weg ist, CSS-Änderungen wie diese zu ketten oder ob es andere Methoden gibt.
Wenn Sie die Höhe der Zielelemente vor dem click -Ereignis nicht kennen, überprüfen Sie sie einfach, nachdem das DOM bereit ist, und setzen Sie jedes Zielelement auf seine eigene Höhe. Auf diese Weise, wenn Sie auf ein Zielelement klicken: * Die Animation funktioniert, weil die Höhe des Elements bereits festgelegt ist. * Es wird einen Befehl weniger geben, der für das Click-Ereignis ausgeführt wird.
Wenn Sie bereits mit jQuery arbeiten, können Sie es ganz verwenden:
%Vor%Vanille:
%Vor%Jedes der Zielelemente hat die Übergangsklasse:
%Vor% Der Übergangsteil wird in seine eigene Klasse verschoben, so dass Sie die Klasse später aus dem HTML-Code entfernen können, wenn Sie entscheiden, sie zu löschen oder für andere Elemente zu verwenden.
Es ist nicht mehr in der "aktiven" Klasse, also bewirkt es die Elemente ohne eine Verbindung zum click -Ereignis, auf diese Weise könnt ihr zum Beispiel toggleClass() anstelle von addClass() verwenden und ihr erhaltet eine animierende Animation beim Klicken wieder auf die Elemente:
Live-Beispiel: Ссылка * Im Beispiel habe ich die Verwendung von reinem JS zu jQuery gewählt, indem ich die Variable "use_jquery" auf "true" oder "false" gesetzt habe.
Tags und Links javascript css css-transitions