Desactivar animación CSS3 con jQuery?

I tienen un objeto que tiene una animación cuando se carga la página:Desactivar animación CSS3 con jQuery?

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

En un cierto tiempo, quiero JavaScript para encender una animación específica que se produce sin fin, hasta que se detiene JavaScript dicho animación. Así que simplemente hice otra clase llamada .logo-loading, y en ciertos momentos, jQuery hace un addClass y un 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; 
     }

Sin embargo, cuando JavaScript elimina la clase, el objeto sigue girando simplemente no importa qué. ¿Hay algo que pueda hacer aquí?

Fuente

2012-02-19 John Shammas

No se olvide de prueba del futuro! IE10 y Opera están implementando animaciones CSS, por lo que también puedes especificar los prefijos -ms y -o para que todos puedan ver cuán asombroso es tu sitio una vez que obtienen las últimas versiones de sus navegadores. –

Usted puede simplemente ignorar que las propiedades de CSS con "ninguna" a cada animación

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

para que pueda detener la animación simplemente llamando a esta función ...

Fuente

2012-02-19 23:09:41

No necesita usar prefijos, jQuery lo agregará para usted;) –

Esto funciona como era de esperar en Firefox, ve este jsFiddle:

http://jsfiddle.net/hNuSd/

Así que modificado el ejemplo (sólo conservaba -moz- queridos, que es Firefox) para ciclos 1s, me comienza a girar y luego termina después de 3.6s. Todo funciona bien, Firefox 11.0 en Xubuntu 11.10.

Si no está usando Firefox, ¿puede probar en Firefox para confirmar que (tanto su ejemplo como el mío) funcionan allí en su máquina? Puede ser una "característica" específica del navegador.

Fuente

2012-02-19 22:58:16

Si desea detener una animación (y luego reanudar desde el punto en que se hizo la pausa) que podría cambiar su estado de reproducir con esta propiedad 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; 
}

a continuación, podría utilizar jQuery para cambiar la clase de pausa:

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

Ver este ejemplo que en realidad hace una pausa sin javascript: http://jsfiddle.net/fRzwS/

Y este mensaje el Forrst del autor del violín: http://forrst.com/posts/How_To_Pause_CSS_Animations-0p7

Fuente

2012-02-20 04:16:39

Desactivar animación CSS3 con jQuery?

Respuesta

Cuestiones relacionadas