Sprawdź, czy element jest animowany CSS3

Question

Czy istnieje sposób sprawdzenia, czy element jest animowany?

Ale animowany nie z ożywionej jQuery, ale z przejścia CSS3 za ..

Problem mam jest ... Mam ten suwak, kliknij na strzałkę daję to

left = left+200 

gdzie po lewej jest albo

element.position().left 

lub

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

(to naprawdę nie ma znaczenia, problem pojawia się albo)

element jest animowana z

transition: left 400ms ease-in-out; 

Tak więc, gdy użytkownik kliknie na strzałki raz, a potem ponownie przed animacja się kończy, lewy zwraca wartość w zależności od jej położenia (więc zamiast powiedzieć .. 400px, może powrócić 235.47px odkąd kliknięto w środku animacji) ..

Answer 1

Po zmianie właściwości elementu left elementu , możesz skojarzyć ab wartość Oolean (na przykład data()) i ustaw ją na true, aby wskazać, że przejście zostało rozpoczęte. Następnie możesz połączyć się z transition end event (który różni się w zależności od przeglądarki) i ustawić wartość boolowską z powrotem na false z programu obsługi, aby wskazać, że przejście zostało zakończone.

końcowy wynik jest coś takiego: (. Uwaga powyższy kod ma działać tylko raz)

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); 
}