3

Tengo este boton que, cuando carga le seteo "animated flash" como clase para que haga la animacion "flash" de animate.css. El problema que tengo es al ponerle de nuevo la clase al dar click al boton, que no coge la animacion. Alguna forma de solucionar esto?

var elemento = document.getElementsByTagName("button")
elemento[0].setAttribute("class","animated flash")

function handleOnClick(e) {
    console.log("button clicked");
    const button = e.target;
    button.setAttribute("class", "animated flash");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<button onclick="handleOnClick(event)"> myAnimatedButton </button>

1 respuesta 1

2

Deberías eliminar la clase y volverla a agregar.

El código sería algo así:

var elemento = document.getElementsByTagName("button")
elemento[0].setAttribute("class","animated flash")

function handleOnClick(e) {
    console.log("button clicked");
    const button = e.target;
    button.classList.remove("flash");
    void button.offsetWidth;
    button.classList.add("flash");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<button onclick="handleOnClick(event)"> myAnimatedButton </button>

5
  • No funciona :\. Tambien deberia de haber una forma no tan nuclear, removeAttribute borrarria otras clases y estilos aplicados al boton, no?
    – Theia
    Commented el 10 jul. 2017 a las 21:45
  • 1
    Actualicé el código, ahora sí debería de funcionar.
    – Jemonge
    Commented el 10 jul. 2017 a las 21:48
  • Pero todavia borraria los demas estilos aplicados al boton, no? y no entiendo por que void button.offsetWidth;
    – Theia
    Commented el 10 jul. 2017 a las 21:50
  • Sí, el código borraría todos las clases y las volvería a agregar. Lo mejor sería eliminar solo la clase que tiene la animación (con jQuery sería muy sencillo). Luego el código que mencionas es un pequeño truco para resetear la animación, hay más info sobre ello aquí: css-tricks.com/restart-css-animation
    – Jemonge
    Commented el 10 jul. 2017 a las 21:56
  • 1
    Volví a actualizar el código. Ahora no remueve todos los estilos, sólo la clase flash. ;)
    – Jemonge
    Commented el 10 jul. 2017 a las 22:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.