I've been exploring different ways to utilize CSS3 Animation Events and Event Listeners across browsers for more precise control over CSS3 animations. While I know it's possible, I'm struggling to implement it due to my current limitations despite weeks of research.
You can view my progress on this issue so far in this jsfiddle: http://jsfiddle.net/mvkMH/23/
The objective is to have a <ul> with an id of #main, containing <li>'s with a class of .box. When a user clicks on any .box, it should add the .move-y class to that element and simultaneously add the .move-x class to the remaining list items. Subsequent clicks on other .box elements should replace existing classes with new ones while maintaining synchronization through CSS3 Animation events.
Why CSS3 Animation Events?
- CSS3 Animations are efficient on iOS
- jQuery-triggered CSS3 Animations allow for easy 'restart' functionality if needed (https://css-tricks.com/restart-css-animation/)
- Using jQuery to manage Animation Start, Iteration, and End events enables complex and interactive CSS3 animations.
In theory, the script should operate as follows, but I haven't been able to execute it successfully:
Clicking a .box element triggers a check for existing .move-x and .move-y classes within #main
If detected, the following actions should occur:
- Replace those classes with move-x-rvs and move-y-rvs
- Attach CSS Animation Event listeners to elements with the new classes
- Remove move-x-rvs and move-y-rvs classes on Animation End Event
- Reset AnimationName to an empty string to enable continuous animation playback
- Add the .move-y class to the clicked element and move-x class to other list items
If no .move-x or .move-y classes are found:
- Add the .move-y class to the clicked element
- Add the .move-x class to other list items
The Animation Event listener functionality should include appropriate prefixes for modern browsers (referencing examples like How do I re-trigger a WebKit CSS animation via JavaScript?)
Once again, you can review my progress in the jsfiddle linked here: http://jsfiddle.net/mvkMH/23/
I would greatly appreciate any assistance or insights you could provide!
Thank you in advance! Bizarro.Z