如何为纯JS实现的Modal弹窗添加延迟效果？

问题背景 #

需要给现有纯JS实现的Modal弹窗添加延迟显示/隐藏效果，原代码如下：

原JS代码

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

原CSS代码

.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

原HTML代码

<button class="trigger">Click the modal!</button>
<div class="modal">
    <div class="modal-content">
        <span class="close-button">×</span>
        <h1>Hello, I am a modal!</h1>
    </div>
</div>

解决方案 #

核心是用JS的setTimeout()函数实现延迟执行，同时要区分弹窗当前状态，避免逻辑冲突。

1. 仅给弹窗打开加延迟

修改触发按钮的事件监听，仅在弹窗未显示时延迟执行显示操作：

// 替换原trigger的事件监听
trigger.addEventListener("click", function() {
    if (!modal.classList.contains("show-modal")) {
        setTimeout(() => toggleModal(), 1000); // 1秒延迟，可自行调整时长
    } else {
        toggleModal(); // 已显示则直接关闭，无延迟
    }
});

2. 给弹窗关闭加延迟

如果需要关闭时也带延迟，修改关闭按钮和点击遮罩的逻辑：

// 替换closeButton的事件监听
closeButton.addEventListener("click", function() {
    if (modal.classList.contains("show-modal")) {
        setTimeout(() => toggleModal(), 500); // 关闭延迟500ms，可调整
    }
});

// 替换windowOnClick函数
function windowOnClick(event) {
    if (event.target === modal && modal.classList.contains("show-modal")) {
        setTimeout(() => toggleModal(), 500);
    }
}

3. 全局统一延迟的优化写法

重写toggleModal函数，根据弹窗当前状态自动处理延迟：

function toggleModal(delay = 500) { // 默认延迟500ms，可传参修改
    if (modal.classList.contains("show-modal")) {
        setTimeout(() => modal.classList.remove("show-modal"), delay);
    } else {
        setTimeout(() => modal.classList.add("show-modal"), delay);
    }
}

// 事件监听直接调用即可
trigger.addEventListener("click", () => toggleModal(1000)); // 打开延迟1秒
closeButton.addEventListener("click", toggleModal); // 关闭用默认500ms
window.addEventListener("click", (event) => {
    if (event.target === modal) toggleModal();
});

4. 配合CSS过渡的注意事项

原CSS的过渡设置需要和JS延迟配合，补充.modal的初始状态并调整过渡时机，让动画更流畅：

/* 补充.modal初始样式 */
.modal {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: visibility 0s linear 0.25s, opacity 0.25s, transform 0.25s;
}

.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

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