点击.exitA按钮后.exitB按钮无法淡入，如何修复？

开发者阿泽

2026-6-25

问题修复方案

核心问题分析

.exitB 未触发淡入的主要原因有两个：

transitionend 事件被重复绑定，导致后续触发逻辑混乱
容器的过渡动画可能未正确触发，或者事件监听未限制单次执行

修复步骤

1. 优化事件监听逻辑，避免重复绑定

修改 showExit 函数，使用 once: true 确保过渡结束事件只执行一次，同时强制触发重绘保证过渡动画生效：

function showExit(containerSelector, exitSelector) {
    const container = document.querySelector(containerSelector);
    const closeButton = document.querySelector(exitSelector);
    
    // 重置按钮状态，确保动画可重复触发
    closeButton.classList.remove("visible");
    
    container.classList.remove("hide");
    // 强制触发DOM重绘，解决CSS过渡不生效问题
    void container.offsetWidth;
    container.classList.add("slide");
    
    // 绑定单次触发的过渡结束事件
    container.addEventListener("transitionend", function() {
      closeButton.classList.add("visible");
    }, { once: true });
}

2. 确保容器过渡动画存在

检查 .video-containerB 的 CSS，必须包含过渡属性才能触发 transitionend 事件。例如：

.video-containerB {
  /* 根据实际需求设置过渡属性，比如位移/高度 */
  transition: transform 0.6s ease;
  transform: translateY(100%);
}

.video-containerB.hide {
  /* 隐藏状态 */
  transform: translateY(100%);
}

.video-containerB.slide {
  /* 显示状态 */
  transform: translateY(0);
}