movimiento - ¿Cómo vuelvo a activar una animación CSS de WebKit a través de JavaScript?

css efectos texto movimiento

Question

Entonces, tengo esta -webkit-animation :

@-webkit-keyframes shake {
0% {
left: 0;
}
25% {
left: 12px;
}
50% {
left: 0;
}
75% {
left: -12px;
}
100% {
left:0;
}
}

Y algunos CSS que definen algunas de las reglas de animación en mi box :

#box{
-webkit-animation-duration: .02s;
-webkit-animation-iteration-count: 10;
-webkit-animation-timing-function: linear;
}

Puedo shake el #box así:

document.getElementById("box").style.webkitAnimationName = "shake";

Pero no puedo volver a sacudirlo más tarde.

Esto solo sacude la caja una vez:

someElem.onclick = function(){
document.getElementById("box").style.webkitAnimationName = "shake";
}

¿Cómo puedo volver a activar una animación CSS mediante JavaScript sin utilizar tiempos de espera o múltiples animaciones?

Answer 1

¿Existe setTimeout() problema con el uso de setTimeout() para eliminar la clase y luego leerla 5 ms después?

svg.classList.remove(''animate'');
setTimeout(function() {
svg.classList.add(''animate'');
}, 10);

Answer 2

1) Agregue el nombre de la animación al #box.trigger en css

#box.trigger{
display:table;
animation:shake .2s 0 linear 1;
-moz-animation:shake .2s 0 linear 1;
-webkit-animation:shake .2s 0 linear 1;
}

2) En java-script no puede eliminar el trigger clase.

3) Elimine el nombre de la clase utilizando el método setTimeOut .

$(document).ready(function(){
$(''#shake-the-box'').click(function(){
$(''#box'').addClass(''trigger'');
setTimeout(function(){
$("#box").removeClass("trigger")},500)
});
});

4) Aquí está la DEMO .

Answer 3

Clone funciona bastante bien en Karaoke en pausa: en IE11 tuvo que forzar un reflujo (la versión más corta de R. Krupiński).

$(''#lyrics'').text("Why does it hurt when I pee?");
changeLyrics(''3s'');
function changeLyrics(sec) {
str = ''lyrics ''+ sec + '' linear 1'';
$(''#lyrics'').css( ''animation'', str);
$(''#lyrics'').css( ''animation-play-state'', ''running'' );
$(''#lyrics'').replaceWith($(''#lyrics'').clone(true));
}

o puede usar lo siguiente:

function resetAnimation(elm) {
$(''#''+elm).replaceWith($(''#''+elm).clone(true));
}

Answer 4

Con su javascript, también puede agregar (y luego eliminar) una clase de CSS en la que se declara la animación. ¿Ves lo que quiero decir?

#cart p.anim {
animation: demo 1s 1; // Fire once the "demo" animation which last 1s
}

Answer 5

Encontré la respuesta basada en el código fuente y ejemplos en la página de github de las pruebas de transición de CSS3 .

Básicamente, las animaciones CSS tienen un evento animationEnd que se dispara cuando la animación se completa.

Para navegadores webkit este evento se llama " webkitAnimationEnd ". Por lo tanto, para restablecer una animación después de haberla llamado, debe agregar un detector de eventos al elemento para el evento animationEnd .

En vainilla simple javascript:

var element = document.getElementById(''box'');
element.addEventListener(''webkitAnimationEnd'', function(){
this.style.webkitAnimationName = '''';
}, false);
document.getElementById(''button'').onclick = function(){
element.style.webkitAnimationName = ''shake'';
// you''ll probably want to preventDefault here.
};

y con jQuery:

var $element = $(''#box'').bind(''webkitAnimationEnd'', function(){
this.style.webkitAnimationName = '''';
});
$(''#button'').click(function(){
$element.css(''webkitAnimationName'', ''shake'');
// you''ll probably want to preventDefault here.
});

El código fuente para las pruebas de transición CSS3 (mencionado anteriormente) tiene el siguiente objeto de support que puede ser útil para transiciones, transformaciones y animaciones de CSS entre navegadores.

Aquí está el código de soporte (re-formateado):

var css3AnimationSupport = (function(){
var div = document.createElement(''div''),
divStyle = div.style,
// you''ll probably be better off using a `switch` instead of theses ternary ops
support = {
transition:
divStyle.MozTransition === ''''? {name: ''MozTransition'' , end: ''transitionend''} :
// Will ms add a prefix to the transitionend event?
(divStyle.MsTransition === ''''? {name: ''MsTransition'' , end: ''msTransitionend''} :
(divStyle.WebkitTransition === ''''? {name: ''WebkitTransition'', end: ''webkitTransitionEnd''} :
(divStyle.OTransition === ''''? {name: ''OTransition'' , end: ''oTransitionEnd''} :
(divStyle.transition === ''''? {name: ''transition'' , end: ''transitionend''} :
false)))),
transform:
divStyle.MozTransform === '''' ? ''MozTransform'' :
(divStyle.MsTransform === '''' ? ''MsTransform'' :
(divStyle.WebkitTransform === '''' ? ''WebkitTransform'' :
(divStyle.OTransform === '''' ? ''OTransform'' :
(divStyle.transform === '''' ? ''transform'' :
false))))
//, animation: ...
};
support.transformProp = support.transform.name.replace(/([A-Z])/g, ''-$1'').toLowerCase();
return support;
}());

No he agregado el código para detectar propiedades de "animación" para cada navegador. He hecho esta respuesta "comunidad wiki" y dejo eso a usted. :-)

Answer 6

Primero debe eliminar la animación y luego agregarla nuevamente. P.ej:

document.getElementById("box").style.webkitAnimationName = "";
setTimeout(function ()
{
document.getElementById("box").style.webkitAnimationName = "shake";
}, 0);

Para hacer esto sin setTimeout, elimine la animación durante onmousedown y agréguela durante onclick :

someElem.onmousedown = function()
{
document.getElementById("box").style.webkitAnimationName = "";
}
someElem.onclick = function()
{
document.getElementById("box").style.webkitAnimationName = "shake";
}

Answer 7

Restablece el valor primero. Use reflow para aplicar el cambio sin usar el tiempo de espera:

function shake() {
var box = document.getElementById("box");
box.style.animationName = null;
box.offsetHeight; /* trigger reflow */
box.style.animationName = "shake";
}

@keyframes shake {
0% { left: 0; }
25% { left: 12px; }
50% { left: 0; }
75% { left: -12px; }
100% { left: 0; }
}
#box {
position: absolute;
width: 75px; height: 75px;
background-color: black;
animation-duration: .02s;
animation-iteration-count: 10;
animation-timing-function: linear;
}
button {
position: absolute;
top: 100px;
}

<div id="box"></div>
<button onclick="shake()">Shake</button>

En contraste con la respuesta aceptada que recomienda animationEnd , este método restablece la animación incluso cuando todavía está en progreso. Esto podría ser o no ser lo que quieres.

Una alternativa sería crear una animación @keyframes duplicada y cambiar entre las dos:

function shake() {
var box = document.getElementById("box");
if (box.style.animationName === "shake")
box.style.animationName = "shake2";
else
box.style.animationName = "shake";
}

@keyframes shake {
0% { left: 0; }
25% { left: 12px; }
50% { left: 0; }
75% { left: -12px; }
100% { left: 0; }
}
@keyframes shake2 {
0% { left: 0; }
25% { left: 12px; }
50% { left: 0; }
75% { left: -12px; }
100% { left: 0; }
}
#box {
position: absolute;
width: 75px; height: 75px;
background-color: black;
animation-duration: .02s;
animation-iteration-count: 10;
animation-timing-function: linear;
}
button {
position: absolute;
top: 100px;
}

<div id="box"></div>
<button onclick="shake()">Shake</button>

Answer 8

Siguiendo la sugerencia de https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Tips , elimine y luego agregue la clase de animación, utilizando requestAnimationFrame para asegurarse de que el motor de procesamiento procesa ambos cambios. Creo que esto es más limpio que usar setTimeout, y maneja la repetición de una animación antes de que se complete la jugada anterior.

$(''#shake-the-box'').click(function(){
$(''#box'').removeClass("trigger");
window.requestAnimationFrame(function(time) {
window.requestAnimationFrame(function(time) {
$(''#box'').addClass("trigger");
});
});

});

http://jsfiddle.net/gcmwyr14/5/

Answer 9

Una alternativa simple pero efectiva:

HTML:

<div id="box"></div>
<button id="shake-the-box">Shake it!</button>​

css:

#box{
background: blue;
margin:30px;
height:50px;
width:50px;
position:relative;
-moz-animation:shake .2s 0 linear 1;
-webkit-animation:shake .2s 0 linear 1;
}
#box.trigger{
display:table;
}
@-webkit-keyframes shake {
0% {
left: 0;
}
25% {
left: 12px;
}
50% {
left: 0;
}
75% {
left: -12px;
}
100% {
left:0;
}
}
@-moz-keyframes shake {
0% {
left: 0;
}
25% {
left: 12px;
}
50% {
left: 0;
}
75% {
left: -12px;
}
100% {
left:0;
}
}​

jQuery:

$(''#shake-the-box'').click(function(){
$(''#box'').toggleClass(''trigger'');
});​

Manifestación:
http://jsfiddle.net/5832R/2/

Cuestiones:
No sé si funciona en Firefox, porque la animación no parece funcionar allí ...