How to return true and false in addeventlistener

Asked

Viewed 43 times

-1

wanted to know if it is possible in addeventlistener as example "animationend" I initialize a variable as false until the end of the animation, and when the animation is finished it changes to True. I don’t know how to implement this

or in "mouseenter", when the mouse was over the element, the variable was True, and when outside the element, false.

I would like to have these variables to use them to fire other animations if the corresponding variable was true!

example

element.addEventListener('animationend', function(){
   //Código a ser executado quando a animação terminar
};

if(estado == true){ // estado que se encontra a variável que possui o valor do addEventListener
   //Código a ser executado caso o animationend tenha terminado
}
javascript

1 answer

1


Just create the variable in a scope accessible to events and use the appropriate events, in case to start the animation is the animationstart, close down animationend (or reach the end)

var el = document.querySelector('<elemento>');
var estado = false;

animation.addEventListener('animationstart', function () {
  estado = true;
});

animation.addEventListener('animationend', function () {
  estado = false;
});

The same goes for mouse event, the

var el = document.querySelector('<elemento>');
var estado = false;

animation.addEventListener('mouseenter', function () {
  estado = true;
});

animation.addEventListener('mouseleave', function () {
  estado = false;
});

Sitting true at the moment the event is triggered.

Note that these are all callbacks, that is if you have something HYPOTHETICALLY like:

var el = document.querySelector('<elemento>');
var estado = false;

animation.addEventListener('mouseenter', function () {
  estado = true;
});

animation.addEventListener('mouseleave', function () {
  estado = false;
});

if (estado) {
    console.log("animado");
} else {
    console.log("NÃO animado");
}

Won’t work, because the IF has already been executed, as I explained in /a/45721/3635

I recommend that you use the MDN documentation (which today is a little better than the others) to study:

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.