Javascript: addEventListener for transitionend不执行函数

2022-01-30 14:44:43 标签 javascriptaddeventlistenertransitionend

我有下面的代码,它应该使一个横幅淡入视图,它做的。然而,还有一些额外的效果,我想在转换完成后触发,但我不能获得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”…它工作。

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码