如何解决JS切换类时模态框过渡动画不生效问题？

你的模态框过渡动画失效的核心原因是：display: none属性无法触发CSS过渡，而且你在切换类的时候，直接移除closed（display:none）同时添加darkened-modal，元素从完全不可见的状态直接显示，过渡动画根本没机会执行。

解决方案步骤 #

1. 重构CSS，替换display: none为可过渡属性

把closed类的display: none改成opacity: 0和visibility: hidden，同时给模态框添加定位和尺寸，确保它能覆盖整个视口：

#modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px) saturate(100%); /* 初始状态与过渡属性对应 */
    transition: all 5s ease; /* 可选：明确过渡曲线让动画更自然 */
    visibility: visible;
    opacity: 1;
}

#modal.darkened-modal {
    backdrop-filter: blur(5px) saturate(40%);
    background-color: rgba(0, 0, 0, 0.486); 
}

#modal.closed {
    visibility: hidden;
    opacity: 0;
}

2. 修正JS逻辑，确保过渡顺序正确

• 打开模态框时，先让元素可见，再触发过渡动画
• 关闭模态框时，等过渡动画完成后再隐藏元素
• 给modal变量添加声明，避免全局变量污染

修改后的JS：

function ImageClicked(image){
    const modal = document.getElementById("modal");
    modal.classList.remove("closed");
    // 强制浏览器重绘，确保过渡触发
    void modal.offsetWidth;
    modal.classList.add("darkened-modal");
}

function OverlayClicked() {
    const modal = document.getElementById("modal");
    modal.classList.remove("darkened-modal");
    // 监听过渡结束事件，完成后再隐藏模态框
    modal.addEventListener('transitionend', function handler() {
        modal.classList.add("closed");
        modal.removeEventListener('transitionend', handler); // 移除监听避免重复触发
    }, { once: true });
}

document.addEventListener(
    "click",
    function(event) {
        const modal = document.getElementById("modal");
        if (event.target.matches("#modal") && !modal.classList.contains("closed")) {
            OverlayClicked();
        }
    },
    false
)

3. 额外说明

• void modal.offsetWidth是强制浏览器触发重绘，避免浏览器合并样式变更导致过渡不触发
• transitionend事件监听确保只有在过渡动画完成后才隐藏模态框，保证用户能看到完整的淡出效果
• 给模态框添加固定定位和全屏尺寸，确保它能覆盖整个页面，点击背景区域才会触发关闭逻辑

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