CSS-Animation, umschaltbar bei Klick

8

Ich versuche, das Caret im folgenden um 180 Grad nach Klick für mein Dropdown-Menü zu drehen. In der Lösung, die Im zu implementieren versucht, ändert sich die Klasse der Einfügemarke, um bei Klick ein- oder auszuschalten. Das erste Mal, wenn ich darauf klicke, dreht es sich nach oben, beim zweiten Mal kehrt es sofort in seine Ausgangsposition zurück und dreht sich dann wieder nach oben. Ich rieche schmutzigen Code, was ist der einfachste Weg, diese Toggle Rotation Animation hinzuzufügen. Vielen Dank im Voraus für jede Hilfe.
Heres meine aktuelle CSS:

%Vor%

    
Daniel Kobe 29.06.2015, 06:05
quelle

2 Antworten

12

Sie brauchen nicht wirklich eine Keyframe-Animation für so etwas Einfaches. Wenn Sie beim Klick nur eine Klasse zu Ihrem Symbol hinzufügen, entfernen Sie diese, damit Ihre Rotation angewendet wird. Hier ist ein funktionierender Plunkr, der Font super und eine einfache Rotation verwendet . Dies ist nur ein einfaches Beispiel. Sie sollten Anbieterpräfixe verwenden und beachten, dass css-Übergänge in älteren Browsern nicht funktionieren.

%Vor%     
Kevin F 29.06.2015, 06:16
quelle
6
%Vor%

Sie sollten einen Anfangszustand haben, um Ihre Animation abzuschließen.

Hier ist das Beispiel: Codepen

AKTUALISIEREN

Hier ist die Version ohne Javascript: Codepen

%Vor%

Die allgemeine Idee besteht darin, die Blockklasse zu ändern, indem Sie Benachbarte Geschwisterselektoren und das Kontrollkästchen geprüft .

    
arm.localhost 29.06.2015 06:16
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Datei gelesen mit "open ()" vs "mit open ()" [duplizieren]