Javascript: addEventListener for transitionend does not execute function

Question

I have the following code which is supposed to make a banner fade into view, which it does. However, there are additional effects I want to trigger once the transition has completed, but I cannot get the transitionend event to trigger a call to a function.

  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");
  } 

I am executing this in Chrome v93, which this site says supports transitionend. My console log shows:

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

As you can see, the fade-in class does get added, and the fade-in does work. But I never get the Transition ended message. Any ideas as to where I am going wrong?

Answer 1

Good Greif! I found the problem. I was posting a comment to include my css for the fade-in effect and noticed that the css is using animation, not transition. I had forgotten that I had changed the css some time ago.

I switched the javascript to use addEventListener("animationend"... and it worked.