Javascript: addEventListener for transitionend不执行函数

Question

我有下面的代码，这是应该使一个横幅淡入视图，它确实。但是，我想在转换完成后触发一些额外的效果，但是我无法让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中执行此操作，该网站称支持transitionend。控制台日志显示:

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

如您所见，渐入类确实被添加了，渐入也确实起作用了。但是我从来没有收到过渡结束消息。有什么想法，我是错的吗?

Answer 1

你好!我找到了问题所在。我发表了一个评论，包括我的css的渐入渐变效果，并注意到css是使用动画，而不是过渡。我忘记了我不久前修改过css。

我把javascript切换到使用addEventListener("animationend"...，它工作。