Als ich kürzlich an einem Post arbeitete, der CSS-Übergänge verwendete, stieß ich zufällig auf einige interessante Entdeckungen. Wenn Sie auf die Stelle wechseln, an der Sie die Übergangssyntax platzieren, kann dies dramatische Auswirkungen auf die Ausführung des Übergangs haben.
Heute werden wir die verschiedenen Optionen für die CSS-Übergangssyntax durchgehen und sehen, wie sich die jeweiligen Animationen auf die Animation auswirken, unabhängig davon, ob Sie mit der Maus einen Hover betreten oder verlassen.
Mausereignisse in CSS
CSS-Übergänge geben uns die großartige Möglichkeit, einfache Animationen ohne JavaScript zu implementieren. Da jedoch in CSS wirklich nicht viel darüber geredet wird, könnte man denken, dass ein Unterschied zwischen Mouse-Over- und Mouse-Out-Effekten immer noch etwas im Bereich von JavaScript wäre. Immerhin gibt es keine Unterstützung für so etwas:
Es stellt sich jedoch heraus, dass Sie diese beiden Variablen tatsächlich effektiv steuern können. Es ist einfach kein sehr intuitiver Prozess. Lassen Sie uns einen Blick darauf werfen, wie es funktioniert.
Wenn Sie die Diskussion überspringen und direkt zur Syntax gehen möchten, bietet CSS Tricks ein gutes Beispiel für diese Technik.
Die normale Syntax: Mouse In und Out sind gleich
Es gibt verschiedene Möglichkeiten, einen CSS-Übergang anzuwenden. Als erstes betrachten wir den einfachen alten Standard. Das bedeutet, dass wir die Standardsyntax verwenden, die Sie finden, wenn Sie eine Google-Suche ausführen, um einen CSS-Übergang zu implementieren.
Zum Experimentieren halten wir die Demo einfach. Der Übergang soll die Verschiebung von einem schwarzen Quadrat zu einem grauen Kreis animieren. So sieht das aus (Browser-Präfixe wurden aus Gründen der Sauberkeit weggelassen):
Das Verhalten dieser Animation ist typisch. Wenn Sie den Mauszeiger über das schwarze Quadrat bewegen, dreht er sich innerhalb einer Sekunde, wenn der Randradius auf 100 Pixel erhöht wird, und ändert seine Farbe, sodass ein grauer Kreis entsteht. Wenn Sie dann die Maus herausnehmen, passiert das Gegenteil. Das Quadrat dreht sich gegen den Uhrzeigersinn in seine ursprüngliche Position zurück, der Randradius nimmt stetig ab und seine Farbe wird wieder schwarz.
Demo: Klicken Sie hier, um dieses Beispiel in Aktion zu sehen.
Umgekehrte Syntax: Kein Mouse-Out-Übergang
Im vorherigen Beispiel haben wir die Übergangssyntax in die #loremdiv Wähler. Was passiert, wenn wir das umkehren und das gleiche Snippet in die #loremdiv: schweben Wähler?
Obwohl es sich falsch anfühlt, stellt sich heraus, dass dies immer noch einen Übergang bewirkt. Wie auch immer, es nur erzeugt einen Übergang beim Hover-Ereignis. Wenn der Benutzer den Hover verlässt, erfolgt die Umwandlung sofort.
Dies gibt uns effektiv das, wonach wir gesucht haben: eine Möglichkeit, die Maus-Ein- und -ausgänge zu verändern. Allerdings ist der Mausausgang an dieser Stelle wirklich kein Übergang, was nicht sehr aufregend ist.
Demo: Klicken Sie hier, um dieses Beispiel in Aktion zu sehen.
Doppelte Syntax: Zwei anpassbare Übergänge
Jetzt haben wir versucht, den Übergang mit dem normalen Selektor zu verknüpfen, und wir haben versucht, ihn in den Hover-Selektor zu setzen. Nun wollen wir sehen, was passiert, wenn wir einen Übergang einfügen beide setzt.
Beachten Sie, dass ich die Zeit beim ersten Übergang reduziert habe, damit wir erkennen können, was er tut. Interessanterweise ist das Ergebnis hier das Gegenteil von dem, was viele Menschen erwarten.
Intuitiv könnten Sie zu dem Schluss kommen, dass die erste Übergangsanweisung beim Einfahren der Maus und die zweite beim Herausfahren der Maus angewendet wird. Das Gegenteil ist jedoch der Fall. Wie wir in unserem letzten Beispiel festgestellt haben, wirkt sich das mit dem Hover-Selector verknüpfte Snippet auf die Maus aus, während das andere für die Maus übrig bleibt.
Jetzt haben wir das Setup, nach dem wir gedreht haben! Dies gibt uns die volle Freiheit, die Effekte der Maus ein- und auszumachen. Mit diesem Beispiel habe ich die Zeit reduziert, die die Animation benötigt, um abzuschließen, wenn der Benutzer den Schwebeflug beendet.
Demo: Klicken Sie hier, um dieses Beispiel in Aktion zu sehen.
Die Effekte variieren
Wenn Sie diese Idee noch weiter ausführen, können Sie nicht nur die Zeit variieren, sondern auch die Eigenschafts- und Timing-Funktion. Hier ist ein Beispiel:
Hier blieb ich bei der gleichen Animation, die wir für das Hover-Ereignis verwendet haben, aber wenn der Benutzer den Hover verlässt, ist das einzige, was zurück animiert, der Grenzradius.
Demo: Klicken Sie hier, um dieses Beispiel in Aktion zu sehen.
Fazit
Zusammenfassend gibt es drei grundlegende Möglichkeiten, wie Sie CSS-Übergänge ansprechen können. Die erste Möglichkeit besteht darin, den Übergang mit einem Nicht-Hover-Selektor zu verknüpfen. Dadurch werden die Hover-In- und Out-Übergänge gleich (nur umgekehrt). Die zweite Möglichkeit besteht darin, den Übergang mit einem Hover-Selektor zu verknüpfen. Dies erzeugt einen Schwebeflug während des Übergangs, eliminiert jedoch den Schwebeflug-Übergang.
Die dritte Möglichkeit besteht darin, Übergänge mit beiden Selektoren zu verknüpfen.In diesem Fall wirkt sich der Nicht-Hover-Übergang auf die schweben Ereignis und der Hover-Übergang wirkt sich auf die schweben in Veranstaltung. Dies ist die Technik, die Sie verwenden möchten, wenn Sie die einzelnen Ereignisse am besten steuern möchten.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie davon halten. Haben Sie jemals bemerkt, dass separate Hover-In / Out-Ereignisse möglich waren? Hast du das irgendwie genutzt?