使用addEventListener时animationend事件未触发的问题排查

核心问题 #

你把animationend事件绑定在了<img>元素上，但CSS动画是作用在#imageContainer容器上的——animationend事件只会在执行动画的元素本身触发，所以绑定对象完全错误，自然不会触发事件。

其他潜在问题 #

1. ID唯一性冲突：id="imageContainer"是DOM唯一标识，你的CSS里用#imageContainer:nth-of-type(1)这种选择器逻辑错误，同一个页面不能存在多个相同ID的元素。即便deleteExistingImageContainer方法能删除旧容器，也不该用ID配合:nth-of-type，建议把容器的id改为class="imageContainer"，再用类选择器配合伪类。
2. 动画作用对象混淆：如果目标是实现图片淡入淡出，动画应该直接作用在<img>上；如果是容器动画，要明确事件绑定的目标元素。

修复方案 #

1. 修正事件绑定目标

把事件绑定到执行动画的imageContainer上，替换原代码中绑定img事件的部分：

// 移除原来的img循环绑定代码，替换为：
imageContainer.addEventListener('animationend', function(e) {
    console.log('animation ended');
}, false);

2. 修正CSS选择器规范

如果需要多个容器的轮播效果，先把容器的ID改为class：

// 创建容器时修改：
imageContainer.className = "mb-3 imageContainer";
// 移除原有的imageContainer.id = 'imageContainer'; 避免重复ID问题

然后修改CSS：

.imageContainer:nth-of-type(1) {
  border: 3px solid green;
  animation-name: fader;
  animation-delay: 0.5s;
  animation-duration: 5s;
  z-index: 20;
}

.imageContainer:nth-of-type(2) {
  z-index: 10;
}

.imageContainer:nth-of-type(n+3) {
  display: none;
}

3. 确保旧容器被正确删除

检查deleteExistingImageContainer方法是否正确移除旧容器：

deleteExistingImageContainer() {
    const oldContainer = document.querySelector('.imageContainer');
    if (oldContainer) {
        oldContainer.remove();
    }
}

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