0
265
Vistas¿Ocultar 3 elementos en secuencia no funciona usando el evento "transitionend" de JavaScript?
QUE . Tengo 3 cuadros: blue , red y black y estoy tratando de hacer la transición uno tras otro, usando detectores de eventos de JavaScript, en el siguiente orden: black , red y luego blue .
CÓMO : https://codepen.io/gremo/pen/XWVeQVP?editors=1010
Estructura HTML básica y anidamiento (bolígrafo para el ejemplo completo):
<div id="container"> <div id="blue"></div> <div id="red"> <div id="black"></div> </div> </div>El código JavaScript es muy 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) EL PROBLEMA : después de que termina el black , blue y el red comienzan al mismo tiempo... y esto es incorrecto porque blue debería comenzar a ocultarse después de que red se completa. Además, la consola muestra que el detector de eventos de final de transitionend para blue se llama 2 veces.
Cualquier ayuda es muy apreciada, he estado luchando con este problema desde hace días.
2 Respuestas
Responde la pregunta0
Parece que debido a que black es un hijo del red , el evento de final de transitionend se burbujeó, lo que provocó que el red disparara el evento dos veces:
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); });(Editado desde tu codepen; no puedo bifurcarlo porque soy demasiado perezoso para registrarme)
0
El evento Transitionend activará todos los oyentes una vez ejecutados. Como rojo y negro, ambos registran el detector de eventos antes de que el primer evento active una ejecución. Para evitar esto, puede pasar una función que agregará el detector de eventos dentro de la función ocultar elemento o, más preferiblemente, pasar el evento junto con el elemento y llamar a stopPropagation. stopPropagation es una función de evento que evitará la propagación del evento, por lo que solo activará el primero en este caso
e?.stopPropagation()A continuación se muestra una función modificada que debería funcionar en su contexto
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); });