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/
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?