Wyłącz animację CSS3 z jQuery?

Question

Mam obiekt, który ma animacji przy załadowaniu strony:

.logo-mark { 
     -webkit-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); 
      -moz-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); 
      -ms-animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); 
      animation: spin 2s 1 cubic-bezier(0.000, 0.000, 0.230, 1.000); 
    } 

W pewnym momencie, chcę, aby włączyć JavaScript konkretnej animacji, który występuje w nieskończoność, aż przestanie JavaScript powiedział animacja. Więc po prostu stworzyłem kolejną klasę o nazwie .logo-loading, a w pewnych momentach jQuery robi addClass i removeClass.

.logo-loading { 
      -webkit-animation: spin 4s infinite linear; 
       -moz-animation: spin 4s infinite linear; 
       -ms-animation: spin 4s infinite linear; 
       animation: spin 4s infinite linear; 
     } 

Jednak, gdy JavaScript usuwa klasę, obiekt po prostu obraca się bez względu na wszystko. Czy mogę coś tutaj zrobić?

Answer 1

można po prostu zastąpić że właściwości CSS z „none” do każdej animacji

function stopAnimation(element) 
{ 
    $(element).css("-webkit-animation", "none"); 
    $(element).css("-moz-animation", "none"); 
    $(element).css("-ms-animation", "none"); 
    $(element).css("animation", "none"); 
} 

, dzięki czemu można zatrzymać animację po prostu wywołanie tej funkcji ...

Answer 2

Działa to jak można się spodziewać w Firefoksie, zobacz ten jsFiddle:

• http://jsfiddle.net/hNuSd/

Więc zmodyfikowany przykład (tylko zachowane -moz- te, jak to Firefox) do 1s cyklach, I uruchom wirowanie, a następnie zakończ je po 3,6 s. Wszystko działa dobrze, Firefox 11.0 na Xubuntu 11.10.

Jeśli nie korzystasz z przeglądarki Firefox, czy możesz wypróbować w Firefoksie, aby potwierdzić, że (zarówno Twój, jak i moje przykłady) działają tam na twoim komputerze? Może to być "funkcja" specyficzna dla przeglądarki.

Answer 3

Jeśli chcesz, aby wstrzymać animację (i następnie wznowione od punktu, w którym to zostało wstrzymane) można przełączyć to grać stanu z tej właściwości CSS:

.paused { 
    -ms-animation-play-state:paused; 
    -o-animation-play-state:paused; 
    -moz-animation-play-state:paused; 
    -webkit-animation-play-state:paused; 
    animation-play-state: paused; 
} 

następnie można użyć jQuery aby włączyć wstrzymaną klasę:

$("#animatedElement").click(function(e){ 
    $(e.currentTarget).toggleClass("paused"); 
}); 

Zobacz ten przykład, że faktycznie wstrzymuje bez javascript: http://jsfiddle.net/fRzwS/

i ten post forrst od autora skrzypcach w: http://forrst.com/posts/How_To_Pause_CSS_Animations-0p7