如何实现JS setTimeout延迟3秒后模态框淡入效果？

我已经实现了3秒后显示模态框及50%透明度的黑色背景，但当前模态框与背景是直接出现的，想让它从0%（0.0）透明度过渡到50%（0.5），且从3秒时开始过渡。

原代码参考 #

CSS：

.modal {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

JS：

const modal = document.getElementById("myModal");

const span = document.querySelector(".close");

setTimeout(function () {
  modal.style.display = "flex";
}, 3000);

span.onclick = () => {
  modal.style.display = "none";
};

修改方案 #

问题出在display属性无法触发CSS过渡，我们需要改用支持过渡的opacity和visibility属性控制显示状态，配合transition实现渐显效果：

修改后的CSS

.modal {
  /* 初始状态：完全透明且不可交互 */
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  /* 定义过渡效果：针对opacity和visibility，时长0.3秒（可自行调整） */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 激活状态：完全可见 */
.modal.active {
  opacity: 1;
  visibility: visible;
}

修改后的JS

const modal = document.getElementById("myModal");
const span = document.querySelector(".close");

setTimeout(function () {
  // 添加active类触发过渡效果
  modal.classList.add("active");
}, 3000);

span.onclick = () => {
  // 移除active类，触发反向过渡
  modal.classList.remove("active");
};

核心说明 #

1. 用opacity: 0替代display: none实现透明隐藏，visibility: hidden确保元素不可交互
2. 通过transition属性指定过渡的属性和时长，让透明度变化平滑过渡
3. 3秒后通过添加/移除active类触发过渡，避免直接修改display导致的瞬时变化

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