Estoy tratando de usar Transitionend basado en un tutorial que estoy siguiendo. En el tutorial, Transitionend se usa en el mismo archivo que el html, es decir, está en una etiqueta al final del elemento del cuerpo. Elimina la clase 'jugando' de los elementos.

Decidí mover todo el JS a un archivo js separado, que en este caso se ha denominado genérico 'script.js'.

El resto del código JS parece funcionar perfectamente excepto key.addEventListener que usa el evento Transitionend. Esto es lo que parece:

 function removeTransition(e) { if (e.propertyName !== 'transform') return; e.target.classList.remove('playing'); } function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`div[data-key="${e.keyCode}"]`); if (!audio) return; key.classList.add('playing'); audio.currentTime = 0; audio.play(); } const keys = Array.from(document.querySelectorAll('.key')); keys.forEach(key => key.addEventListener('transitionend', removeTransition)); window.addEventListener('keydown', playSound)

Si mantengo el código JS en el archivo html, el evento de final de transición funciona bien y elimina la clase 'reproduciendo'. Sin embargo, si lo muevo al archivo script.js, transtionend nunca se activa. Supongo que esto está relacionado con la documentación que indica:

"En el caso de que se elimine una transición antes de completarse, por ejemplo, si se elimina la propiedad de transición o si la visualización se establece en ninguno, el evento no se generará".

Pero no sé de qué manera está sucediendo eso aquí y, lo que es más importante, cómo solucionarlo para usar la transición final en un archivo .js separado.