0

Necesito una ayuda, tengo un boton que al darle click cambia la clase de un div, inicialmente ".bas" a ".activate," Para aplicar una animacion. ¿Como puedo hacer que despues del onclick, cambiar la clase y ejecutar la animacion la caja vuelva a .bas? Mi codigo JS:

var boton = document.getElementById("boton");
boton.onclick = basico;
function basico(){
    let  ataque = document.getElementById("move")
    ataque.className = "activate";
}

1
  • No adjuntas nada de tú código ni de la supuesta "animación". Tampoco queda claro si cómo tal la "animación" es una animación o una transición de css. De cualquier manera prueba agregando al final de la función basico algo como: ataque.onanimationend = (e) => e.target.classList.remove("activate"). Si no te funciona prueba cambiando el evento a .transitionend en lugar de .onanimationend
    – Jaime
    Commented el 1 may. 2022 a las 22:15

2 respuestas 2

0

encontre quizas una solucion a tu problema te dejo el codigo:

/* Script */

var boton = document.getElementById('boton');
 var base = document.querySelector('.base');
    boton.addEventListener('click', function(){
    base.classList.toggle('dark');
 });
/* Estilos css*/
.base{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  background-color: #f2f2f2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.dark{
  background: #222;
  color: #fff;
}
<!-- Contenido HTML -->
<button id="boton">
  Cambiar
</button>
<div class="base">

</div>

0

No se cuanto dura tu animacion, pero si sabes el tiempo, le puedes hacer un setTimeout y despues devolverle la clase original.

JS

var boton = document.getElementById("boton");
    boton.addEventListener("click", basico);

function basico(){
  bas =  document.querySelector(".base");
  bas.className = "animacion";
    
    tiempo = setTimeout(tiempo,2000);
}
function tiempo(){
document.querySelector(".animacion").className = "base";
    
}
   

HTML

    <button id="boton">
        Cambiar
      </button>
      <div class="base">
      </div>

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.