I am trying to use transitionend based on a tutorial I'm following. In the tutorial, transitionend is used in the same file as the html, i.e., it is in a tag at the end of the body element. It removes the 'playing' class from the elements.

I decided to move all the JS to a separate js file, which in this case has been named the generic 'script.js'.

The rest of the JS code seems to work perfectly except the key.addEventListener that uses the transitionend event. Here's what it looks like:

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)

If I keep the JS code in the html file, the transitionend event works just fine and removes the 'playing' class. However, if I move it to the script.js file, transtionend never triggers. I'm assuming this is related to the documentation stating:

"In the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the event will not be generated."

But I don't know in what way that's happening here, and, more importantly, how to work around it in order to use transitionend in a separate .js file.