Verificar si el elemento está siendo animado CSS3

Question

¿Hay alguna manera de verificar si el elemento está siendo animado?

Pero ser animado no con animado de jQuery, pero con la transición de CSS3 ..

El problema que tengo es ... Tengo este deslizador, en la flecha haga clic en I daría

left = left+200 

donde la izquierda es bien

element.position().left 

o

parseInt(element.css("left")); 

(que en realidad no importa, el problema se produce con cualquiera)

el elemento está siendo animado con

transition: left 400ms ease-in-out; 

así, cuando el usuario hace clic en la flecha de una vez y luego otra vez antes de que el la animación termina, la izquierda devuelve valor según su posición (así que en lugar de decir ... 400px, puede devolver 235.47px desde que se hizo clic en el medio de la animación) ..

Answer 1

Cuando cambia la propiedad left de un elemento , puedes asociar ab valor oolean con él (usando data() por ejemplo) y configurarlo en true para indicar que se ha iniciado una transición. A continuación, puede enlazar al transition end event (que varía según el navegador) y establecer el valor booleano en false desde su controlador para indicar que la transición ha finalizado.

El resultado final es algo así como: (. Anote el código anterior sólo tiene que ejecutar una vez)

yourElement.on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd", 
    function() { 
     $(this).data("transitioning", false); // Transition has ended. 
    } 
); 

---

if (!yourElement.data("transitioning")) { 
    // No transition active, compute new position. 
    var theNewLeft = yourElement.position().left + 200; 
    // Set new position, which will start a new transition. 
    yourElement.data("transitioning", true).css("left", theNewLeft); 
}