点击第二个exit按钮无法跳转至.container3的问题排查与修复

问题根源 #

1. 动态元素事件绑定缺失：第二个Exit按钮所在的.container2初始处于隐藏状态，你仅给页面加载时可见的第一个按钮绑定了点击事件，后续显示的第二个按钮没有绑定事件逻辑，导致点击无反应。
2. 单一动画结束处理器不匹配多场景：你的代码里只写了一个animationEndHandler，仅处理.container1到.container2的跳转，没有覆盖.container2到.container3的场景；同时动画事件未正确解绑/重绑，第二次触发动画后没有对应后续动作。
3. 动画状态未重置：第一次触发initial-fade动画后，类名未移除或重置，第二次点击时无法再次触发动画，跳转逻辑也无法启动。

修复方案 #

1. 用事件委托解决动态按钮点击问题 #

把点击事件绑定到父级容器（比如所有container的共同父元素），不管按钮是初始存在还是后续显示，都能触发逻辑：

// 假设父容器类名为page-container
document.querySelector('.page-container').addEventListener('click', (e) => {
  if (!e.target.matches('.exit-btn')) return;
  handleExitAction(e.target);
});

2. 拆分并添加第二个动画结束处理器 #

针对两次跳转场景，创建独立的处理器，分别处理容器切换逻辑：

// 处理器1：container1 → container2
function fadeEndHandler1(e) {
  if (e.animationName !== 'initial-fade') return;
  
  document.querySelector('.container1').style.display = 'none';
  document.querySelector('.container2').style.display = 'block';
  // 解绑当前事件，避免重复触发
  this.removeEventListener('animationend', fadeEndHandler1);
}

// 处理器2：container2 → container3
function fadeEndHandler2(e) {
  if (e.animationName !== 'initial-fade') return;
  
  document.querySelector('.container2').style.display = 'none';
  document.querySelector('.container3').style.display = 'block';
  this.removeEventListener('animationend', fadeEndHandler2);
}

3. 重置动画状态，确保每次点击都能触发动画 #

在点击按钮时，通过移除再重新添加动画类名（配合强制重绘），让动画可以重复触发：

function handleExitAction(btn) {
  const currentContainer = btn.closest('.container');
  
  // 重置动画：先移除类名，强制浏览器重绘后再添加
  currentContainer.classList.remove('initial-fade');
  void currentContainer.offsetWidth; // 触发重绘
  currentContainer.classList.add('initial-fade');
  
  // 根据当前容器绑定对应处理器
  if (currentContainer.classList.contains('container1')) {
    currentContainer.addEventListener('animationend', fadeEndHandler1);
  } else if (currentContainer.classList.contains('container2')) {
    currentContainer.addEventListener('animationend', fadeEndHandler2);
  }
}

4. 优化CSS确保动画可重复触发 #

调整动画样式，避免fill-mode导致元素停留在动画最终状态：

.initial-fade {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

如果需要动画结束后元素隐藏，也可以在动画处理器中直接设置display: none，不需要依赖CSS的forwards。

逻辑流程总结 #

1. 页面加载后，通过事件委托给所有Exit按钮绑定点击事件。
2. 点击按钮时，找到当前所在容器，重置并触发淡出动画。
3. 根据容器类型绑定对应的动画结束处理器。
4. 动画结束后，切换容器显示状态，解绑当前动画事件，为下一次跳转做好准备。

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