So synchronisieren Sie CSS3-Animationsereignisse und -Ereignislistener mit jQuery

Ich versuche, eine solide, moderne (Cross-) Browsermethode für die Verwendung von CSS3-Animationsereignissen und Event-Listenern zu finden, um die CSS3-Animationen besser steuern zu können. Ich weiß, dass es möglich ist, dies zu tun. Leider ist es momentan trotz meiner Recherchen in den letzten 2-3 Wochen weit über meine Möglichkeiten hinaus.

Hier ist mein bisheriges Beispiel: Ссылка

Hier ist, was ich versuche zu tun: Ich habe eine <ul> mit einer ID von #main mit <li> 's mit einer Klasse von .box . Wenn ein Benutzer auf ein beliebiges .box klickt, fügt es die .move-y -Klasse zu ($this) hinzu - es fügt auch gleichzeitig die .move-x -Klasse zu den verbleibenden Listenelementen hinzu. Wenn der Benutzer auf ein anderes .box klickt, werden alle vorhandenen .move-y and .move-x -Klassen durch .move-y-rvs and .move-x-rvs -Klassen ersetzt. Währenddessen verwenden wir CSS3-Animationsereignisse, um alles perfekt synchronisiert zu halten.

Warum CSS3-Animationsereignisse?

• CSS3 Animationen sind schnell auf iOS
• CSS3-Animation, die über jQuery ausgelöst wird, ermöglicht es Ihnen, die Animation neu zu starten, wenn sie bereits abgespielt wurde ( Ссылка )
• Theoretisch können mit jQuery AnimationStart , AnimationIteration und AnimationEnd -Ereignisse sehr komplexe und interaktive CSS3-Animationen erstellt werden.

Hier ist die Art und Weise, wie das Skript in meinem Kopf funktionieren sollte - ich konnte es im wirklichen Leben einfach nicht zur Arbeit bringen; -)

1. Wenn Sie auf das .box-Element klicken, überprüfen Sie #main auf alle .move-x- und .move-y-Klassen

2. Wenn .move-x- und .move-y-Klassen erkannt werden:

   • Ersetzen Sie diese Klassen durch move-x-rvs und .move-y-rvs
   • Fügen Sie css Animationsereignis Listener den Elementen mit den Klassen .move-x-rvs und .move-y-rvs
   hinzu
   • Am AnimationEnd-Ereignis entfernen Sie die Klassen .move-x-rvs und .move-y-rvs
   • Setzen Sie AnimationsName auf eine leere Zeichenfolge (dadurch wird die css3-Animation zurückgesetzt, um bei erneutem Klicken erneut abgespielt zu werden)
   • Fügen Sie jetzt die .move-y-Klasse zu $ ​​(this)
   hinzu
   • Fügen Sie die .move-x-Klasse allen anderen verbleibenden Listenelementen hinzu

3. Wenn .move-x und .move-y nicht erkannt werden:

   • Fügen Sie die .move-y-Klasse zu $ ​​(this)
   hinzu
   • Fügen Sie die .move-x-Klasse allen anderen verbleibenden Listenelementen hinzu

4 - Die Listenerfunktion Animationsereignis sollte die Präfixe für moderne Browser anfügen (wie in diesem Beispiel - Wie trigge ich eine WebKit-CSS-Animation über JavaScript neu? )

Noch einmal, hier ist mein bisheriges Thema: Ссылка

Jede mögliche Hilfe, die Sie Leute zur Verfügung stellen konnten, würde sehr geschätzt werden!

Vielen Dank im Voraus! Bizarro.Z