0

estoy haciendo una pequeña animacion con setIterval, por el momento todo bien..al click setInterval hace un callback a la funcion bounce. todo esto se dispara al evento click. me gustaria que la animacion dejara de correr al click de nuevo pero creo que no seria buena practica colocar el clearInterval dentro del mismo evento o quizas aun no entiendo bien el funcionamiento de este metodo.

let ball = document.getElementById('ball');

ball.addEventListener('click', () => {
setInterval(bounce, 500);

function bounce() {
    ball.style.animation = 'bounce 1s';
    ball.style.animationIterationCount = 'infinite';
  }
});

aqui va el css:

@import url('https://fonts.googleapis.com/css?family=Montserrat');


h1, h2 {
font-family: 'Montserrat', sans-serif;
}

#ball {
width: 150px;
height: 150px;
margin: 0 auto;
margin-top: 400px;
background: purple;
border-radius: 100px;
}


@keyframes bounce {
0% {
   margin-top: 400px;   
}

50% {
    margin-top: 300px;
}

100% {
    margin-top: 400px;
}
}

1 respuesta 1

2

Utiliza el clearInterval y una variable booleana que te haga la funcion de bandera, para saber cuando activar o desactivar el setInterval.

Te dejo un ejemplo:

let ball = document.getElementById('ball');
let toogleClick = false;
let idSetInterval;

ball.addEventListener('click', () => {

    toogleClick = !toogleClick;

    if(toogleClick){
        idSetInterval = setInterval(bounce, 500);
    } else {
        clearInterval(idSetInterval);
    }

    function bounce() {
        ball.style.animation = 'bounce 1s';
        ball.style.animationIterationCount = 'infinite';
      }
});
1
  • muchas gracias orlando!
    – Richi
    Commented el 1 abr. 2019 a las 18:11

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.