0
263
ViewsHiding 3 elements in sequence not working using JavaScript "transitionend" event?
WHAT. I have 3 boxes: blue, red and black and I'm trying to transition them one after another, using JavaScript event listeners, in the following order: black, red and then blue.
HOW: https://codepen.io/gremo/pen/XWVeQVP?editors=1010
Basic HTML structure and nesting (pen for the complete example):
<div id="container">
<div id="blue"></div>
<div id="red">
<div id="black"></div>
</div>
</div>
JavaScript code is very simple:
const blue = document.getElementById('blue');
const red = document.getElementById('red');
const black = document.getElementById('black');
const hideElement = element => {
console.log(`Hiding element ${element.getAttribute('id')}`);
element.classList.add(element.dataset.hideClass);
};
black.addEventListener('transitionend', () => hideElement(red)); // when black transition ends, hide the red
red.addEventListener('transitionend', () => hideElement(blue)); // when red transition ends, hide the blue
hideElement(black); // hide the black (start the chain)
THE PROBLEM: after the black ends, blue and red start at the same time... and this is wrong because blue should start hiding after red completes. In addition, console show that the transitionend event listener for blue is called 2 times.
Any help is much appreciated, I've be struggling with this problem since days.
2 answers
Answer question0
It seems that because black is a child of red, the transitionend event got bubbled up, causing red to fire the event twice:
document.addEventListener('DOMContentLoaded', () => {
const blue = document.getElementById('blue');
const red = document.getElementById('red');
const black = document.getElementById('black');
const hideElement = element => {
console.log(`Hiding element ${element.getAttribute('id')}`);
element.classList.add(element.dataset.hideClass);
};
black.addEventListener('transitionend', (e) => {
e.stopPropagation();// <-- added this line
hideElement(red);
});
red.addEventListener('transitionend', () => hideElement(blue));
hideElement(black);
});
(Edited from your codepen; I can't fork it because I'm too lazy to register)
0
transitionend event will trigger all the listeners once executed. As red and black both register the event listener before the first event triggers both a run. To prevent this, you could either pass a function which will add the event listener inside the hide element function or more preferably pass the event alongside the element and call stopPropagation. stopPropagation is an event function which will prevent the propagation of the event, thus only triggering the first one in this case
e?.stopPropagation()
Below is a modified function which should work in your context
document.addEventListener('DOMContentLoaded', () => {
const blue = document.getElementById('blue');
const red = document.getElementById('red');
const black = document.getElementById('black');
const hideElement = (element,e) => {
console.log(`Hiding element ${element.getAttribute('id')}`);
e?.stopPropagation()
element.classList.add(element.dataset.hideClass);
};
black.addEventListener('transitionend', (e) => hideElement(red,e));
red.addEventListener('transitionend', (e) => hideElement(blue,e));
hideElement(black);
});