How to Sync CSS3 Animation Events and Event Listeners with jQuery

Question

I am trying to figure out a solid, cross-(modern)browser method for using CSS3 Animation Events and Event Listeners to gain fine-tuned control over CSS3 animations. I know its possible to do this. Sadly it's just WAY beyond my capabilities at the moment, despite all the research I've done in the last 2-3 weeks.

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

Here is what I'm trying to do: I have a <ul> with an id of #main containing <li>'s with a class of .box. When a user clicks on any .box it adds the .move-y class to ($this) - it also simultaneously adds the .move-x class to the remaining list items. When the user clicks another .box, all the existing .move-y and .move-x classes are replaced with .move-y-rvs and .move-x-rvs classes. All the while using CSS3 Animation events to keep everything perfectly synced up.

Why CSS3 Animation Events?

• CSS3 Animations are fast on iOS
• CSS3 Animation triggered via jQuery allow you to 'restart' the animation if it has been played already (https://css-tricks.com/restart-css-animation/)
• In theory, by using jQuery to keep track of AnimationStart, AnimationIteration and AnimationEnd events one can create very complex and interactive CSS3 animations.

Here is the way the script should work in my mind - I just couldn't get it to work in real life ;-)

1. Upon clicking the .box element, Check #main for any .move-x and .move-y classes

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

   • replace those classes with move-x-rvs and .move-y-rvs
   • Attach css Animation Event listeners to the elements with .move-x-rvs and .move-y-rvs classes
   • On AnimationEnd Event remove the .move-x-rvs and .move-y-rvs classes
   • Set AnimationName to an empty string (this resets the css3 animation to play again if clicked again)
   • Now add the .move-y class to $(this)
   • Add the .move-x class to all the other remaining list items

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

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

4 - The Animation Event listener functionality should append the prefixes for modern browsers (like in this example - How do I re-trigger a WebKit CSS animation via JavaScript?)

Again, Here is my jsfiddle on this so far: http://jsfiddle.net/mvkMH/23/

Any help you folks could provide would be greatly appreciated!

Thanks in advance! Bizarro.Z

Answer 1

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

Answer 2

have a look at the jquery.transit plugin