-1

我有以下代码，它应该使横幅淡入视野，它确实如此。但是，一旦转换完成，我想触发其他效果，但我无法让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=​&quot;modalBanner fade-in">​…​&lt;/div>  ​GameTracker.html:291
transition added                           GameTracker.html:294
>

如您所见，确实添加了淡入类，并且淡入确实有效。但我从来没有收到过渡结束的消息。关于我哪里出错的任何想法？

4

1 回答 1

-1

好格瑞夫！我发现了问题。我发布了一条评论，将我的 css 包含在淡入效果中，并注意到 css 使用的是动画，而不是过渡。我忘了我已经改变了一段时间的CSS。

我将javascript切换为使用addEventListener("animationend"...并且它有效。

于 2021-09-19T13:24:03.720 回答