Tengo el siguiente código que se supone que hace que un banner se desvanezca a la vista, lo cual hace. Sin embargo, hay efectos adicionales que quiero activar una vez que se haya completado la transición, pero no puedo hacer que el evento de final de transición active una llamada a una función.

 modalBanner.classList.remove("fade-in", "fade-out"); modalBanner.classList.add("hidden"); modalBanner.innerHTML = bannerText; if (bannerText != "") { console.log("adding transition"); modalBanner.classList.add("fade-in"); var qs = document.querySelector('.fade-in'); console.log(qs); qs.addEventListener("transitionend", () => { console.log('Transition ended'); }); modalBanner.classList.remove("hidden"); console.log("transition added"); }

Estoy ejecutando esto en Chrome v93, que este sitio dice que admite la transición . El registro de mi consola muestra:

 adding transition ​GameTracker.html:288 <div class=​"modalBanner fade-in">​…​</div> ​GameTracker.html:291 transition added GameTracker.html:294 >

Como puede ver, la clase de fundido de entrada se agrega y el fundido de entrada funciona. Pero nunca recibo el mensaje de transición finalizada . ¿Alguna idea de dónde me estoy equivocando?