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í ...