How to sync CSS3 animation events and event listeners using jQuery

Question

I'm trying to find a reliable, cross- (modern) browser method for using CSS3 animation events and event listeners to get finely tuned control over CSS3 animations. I know that this is possible to do. Unfortunately, at the moment this simply goes beyond my capabilities, despite all the research that I have done over the past 2-3 weeks.

Here is my jsfiddle on this issue: http://jsfiddle.net/mvkMH/23/

Here is what I am trying to do: I have a <ul> with the identifier #main containing the <li> with the .box class. When the user clicks on any .box he adds the .move-y class to ($this) - he also adds the .move-x class to the rest of the list. When the user clicks another .box , all existing .move-y and.move-x classes are replaced with .move-y-rvs and.move-x-rvs . Using CSS3 Animation events all the time so everything is perfectly in sync.

Why are CSS3 animated events?

• CSS3 animations fast on iOS
• CSS3 Animation launched via jQuery allows you to "restart" the animation if it has already been played ( https://css-tricks.com/restart-css-animation/ )
• Theoretically, using jQuery to track AnimationStart , AnimationItered, and AnimationEnd events , you can create very complex and interactive CSS3 animations.

This is how the script should work in my head - I just couldn't get it to work in real life ;-)

1. After clicking on the .box element, check #main for the .move-x and .move-y classes.

2. If .move-x and .move-y classes are found:

   • replace these classes with move-x-rvs and .move-y-rvs
   • Attach CSS animation event listeners to elements with .move-x-rvs and .move-y-rvs classes
   • In the AnimationEnd event, remove the .move-x-rvs and .move-y-rvs classes
   • Set the AnimationName to an empty string (when clicked again, the css3 animation restarts)
   • Now add the .move-y class to $ (this)
   • Add the .move-x class to all other list items

3. If .move-x and .move-y are not found:

   • Add the .move-y class to $ (this)
   • Add the .move-x class to all other list items

4. Animation event listener functionality should add prefixes for modern browsers (as in this example. How to restart WebKit CSS animation via JavaScript? )

Again, here is my jsfiddle for that matter: http://jsfiddle.net/mvkMH/23/

Any help you guys could provide would be greatly appreciated!

Thanks in advance! Bizarro.Z

Answer 1

look jquery.transit plugin

Answer 2

create a jQuery function that changes the class of an element with a specific identifier. Then you can synchronize them by calling a function in jQuery code.