callback also appliying to the first animationend element-CodePudding

I want to make something when the first animation finishes > start another animation > and when the second also animationed > alert something

But here, the alert also showing after the first animation finishes? why is this happening? even when I have said to show the alert when the one animated

<div id="one">
  <div id="second">
    
  </div>
</div>

<button id="mybtn">
  Animate
</button>

@keyframes test {
      100% {
        
        height: 0px;
      }
}

#one {
  height: 100px;
  width: 100px;
  background: red;
  
}

#second {
  height: 70px;
  width: 70px;
  background: blue;
  
}

#mybtn {
  margin-top: 50px;
}

const overlay = document.getElementById('one');
const second = document.getElementById('second');
const mybtn = document.getElementById('mybtn');

mybtn.addEventListener('click', function(){
        second.style.animation = '4000ms ease forwards test';
     second.addEventListener("animationend", function() {
     
       one.style.animation = '4000ms ease forwards test';
       one.addEventListener("animationend", function() {
                 alert('hello');
            });
     });
});

here is the full jsfiddle code : - https://jsfiddle.net/hjqxvy89/

CodePudding user response：

Evidently parent element receives animationend event on it's children too, so you have two options, either check for the event.target:

const overlay = document.getElementById('overlay');
const second = document.getElementById('second');
const mybtn = document.getElementById('mybtn');

mybtn.addEventListener('click', function(){
        second.style.animation = '4000ms ease forwards test';
     second.addEventListener("animationend", function() {
     
       overlay.style.animation = '4000ms ease forwards test';
       overlay.addEventListener("animationend", function(e) {
              if (e.target === overlay)
                 alert('hello');
            });
     });
});

@keyframes test {
      100% {
        
        height: 0px;
      }
}

#overlay {
  height: 100px;
  width: 100px;
  background: red;
  
}

#second {
  height: 70px;
  width: 70px;
  background: blue;
  
}

#mybtn {
  margin-top: 50px;
}

<div id="overlay">
  <div id="second">
    
  </div>
</div>

<button id="mybtn">
  Animate
</button>

or simply use event.preventPropagation() in the parent event handler:

const overlay = document.getElementById('overlay');
const second = document.getElementById('second');
const mybtn = document.getElementById('mybtn');

mybtn.addEventListener('click', function(){
        second.style.animation = '4000ms ease forwards test';
     second.addEventListener("animationend", function(e) {
            e.stopPropagation();
     
       overlay.style.animation = '4000ms ease forwards test';
       overlay.addEventListener("animationend", function() {
                 alert('hello');
            });
     });
});

@keyframes test {
      100% {
        
        height: 0px;
      }
}

#overlay {
  height: 100px;
  width: 100px;
  background: red;
  
}

#second {
  height: 70px;
  width: 70px;
  background: blue;
  
}

#mybtn {
  margin-top: 50px;
}

<div id="overlay">
  <div id="second">
    
  </div>
</div>

<button id="mybtn">
  Animate
</button>

also: animationend event also also fires on end of animations of child elements?