Cómo sincronizar eventos de animación CSS3 y oyentes de eventos con jQuery

Question

Estoy intentando descubrir un método de navegador sólido, cruzado (moderno) para usar Eventos de animación CSS3 y escuchas de eventos para obtener un control preciso sobre las animaciones de CSS3 . Sé que es posible hacer esto. Lamentablemente, está MUY por encima de mis capacidades en este momento, a pesar de todas las investigaciones que he hecho en las últimas 2 o 3 semanas.

Aquí está mi jsFiddle en esto hasta ahora: http://jsfiddle.net/mvkMH/23/

Aquí es lo que estoy tratando de hacer: Tengo un <ul> con un id de #main contiene <li> 's con una clase de .box. Cuando un usuario hace clic en cualquier .box agrega la clase .move-y a ($this) - también agrega simultáneamente la clase .move-x a los elementos de la lista restantes. Cuando el usuario hace clic en otro .box, todas las clases existentes .move-y and .move-x se reemplazan con las clases .move-y-rvs and .move-x-rvs. Todo el tiempo usando eventos de Animación CSS3 para mantener todo sincronizado perfectamente.

¿Por qué eventos de animación CSS3?

• CSS3 Las animaciones son rápidos en IOS
• CSS3 Animación activado a través de jQuery le permiten 'reinicio' de la animación si ya se ha jugado (https://css-tricks.com/restart-css-animation/)
• En teoría, mediante el uso de jQuery para realizar un seguimiento de AnimationStart, AnimationIteration y AnimationEnd eventos uno puede crear animaciones CSS3 muy complejas e interactivas.

Aquí es la forma en que el guión debe trabajar en mi mente - no pude conseguir que funcione en la vida real ;-)

1. Al hacer clic en el elemento .box, comprobar #main para cualquier .move-x y y-.Llevar clases

2. Si se detectan .move-x-y y .move clases:

   • reemplazar aquellas clases con move-X-RVs y .move- y-rvs
   • Adjuntar css Animación Evento oyentes a los elementos con .Llevar-x-rvs y clases .Llevar-y-rvs
   • En AnimationEnd Evento eliminar los .Llevar-x-rvs y .Llevar-y- clases rvs
   • Establecer AnimationName a una cadena vacía (esto restablece la animación CSS3 para jugar de nuevo si se hace clic de nuevo)
   • Ahora añadir la clase .move-y a $ (this)
   • Añadir la .move- x clase para todos los demás elementos de lista restantes

3. If .move-x and.mover-y no son detectados:

   • Añadir la clase .move-y a $ (this)
   • Añadir la clase .move-x para todos los demás elementos de la lista restantes

4 - El Evento funcionalidad oyente Animación deben añadir los prefijos para los navegadores modernos (como en este ejemplo - How do I re-trigger a WebKit CSS animation via JavaScript?)

Una vez más, aquí está mi jsFiddle en esto hasta el momento: http://jsfiddle.net/mvkMH/23/

¡Cualquier ayuda que la gente pueda proporcionar sería muy apreciada!

¡Gracias de antemano! Bizarro.Z

Answer 1

echar un vistazo a la jquery.transit complemento

Answer 2

crear una función de jQuery que cambia la clase de un elemento con un ID específico. Luego puede sincronizarlos llamando a la función en el código jQuery.