Javascript: addEventListener for transitionend不执行函数

我有下面的代码，它应该使一个横幅淡入视图，它做的。然而，还有一些额外的效果，我想在转换完成后触发，但我不能获得transitionend事件来触发对函数的调用。

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

我正在执行这个Chrome v93，这个网站说支持过渡端。

我的控制台日志显示:

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

正如你所看到的，渐入类被添加并且渐入工作。但我从未收到过渡时期结束的消息。

知道我哪里出错了吗？

# # #好格雷夫！我发现了问题。我发表了一个评论，包括我的css淡入效果，注意到css使用的是动画而不是过渡。我忘了我之前已经更改过css了。

我切换javascript使用addEventListener(“animationend”…它工作。