transitionend事件的addEventListener无法触发执行函数问题排查

看起来你已经把横幅的淡入效果做出来了，但就是抓不到transitionend事件，这种情况我之前也踩过坑，给你几个排查和修复的方向：

1. 直接绑定到目标元素，别用querySelector绕弯 #

你代码里用document.querySelector('.fade-in')去找元素，虽然日志显示找到了正确的modalBanner，但万一页面上还有其他带fade-in类的元素，就可能绑错对象。直接用你已经拿到的modalBanner绑定事件更靠谱，还能避免额外的DOM查询：

modalBanner.classList.add("fade-in");
// 直接用modalBanner绑定，加上once: true确保只触发一次，避免重复绑定
modalBanner.addEventListener("transitionend", () => {
    console.log('Transition ended');
}, { once: true });
modalBanner.classList.remove("hidden");

2. 强制浏览器触发重排，避免样式合并 #

浏览器为了性能，会把多个DOM/样式操作批量处理，有时候会导致过渡还没开始，你的事件监听就“赶不上趟”。可以在添加fade-in类之后，强制浏览器计算一次元素布局，让fade-in的样式先生效，再移除hidden类：

modalBanner.classList.add("fade-in");
// 读取offsetHeight强制重排，让浏览器应用fade-in的样式
void modalBanner.offsetHeight;
modalBanner.addEventListener("transitionend", () => {
    console.log('Transition ended');
}, { once: true });
modalBanner.classList.remove("hidden");

这个小技巧我常用，每次遇到过渡事件不触发的情况，加这个基本都能解决。

3. 过滤特定的过渡属性，避免被其他属性干扰 #

如果你的fade-in类里定义了多个过渡属性（比如同时过渡opacity和transform），transitionend会针对每个属性触发一次。你可以在事件回调里检查propertyName，只关注你需要的属性（比如opacity）：

modalBanner.addEventListener("transitionend", (event) => {
    if (event.propertyName === 'opacity') {
        console.log('Opacity transition ended');
    }
}, { once: true });

这样能确保你看到的日志是你关心的那个过渡完成的信号。

4. 检查hidden类的样式是否合理 #

最后确认下你的hidden类是不是用了display: none——如果是的话，浏览器不会渲染这个元素的过渡效果（虽然你说淡入正常，但可能是hidden的样式不是display:none？）。如果hidden是display: none，建议改成：

.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.fade-in {
    opacity: 1;
    visibility: visible;
}

这样元素始终在文档流中，过渡能正常触发，transitionend事件也能被捕获到。

你可以先试试第一种和第二种方法，应该就能看到Transition ended的日志了！

内容的提问来源于stack exchange，提问作者Clive Pottinger