如何为打开的dialog模态元素添加CSS transition过渡效果？

问题原因 #

浏览器默认对未打开的<dialog>应用display: none样式，调用showModal()时会直接将其切换为display: block，而display属性的突变无法触发CSS过渡。同时open属性对应的样式会立即生效，导致你设置的opacity和background-color过渡无法正常触发。

解决方案 #

核心思路是让<dialog>在未打开时保持布局可见（避免display: none），仅通过opacity和visibility控制显示状态，再配合open属性+自定义类的组合触发过渡。具体步骤：

1. 重置<dialog>的默认隐藏方式，用visibility: hidden和opacity: 0替代display: none，确保元素始终存在于布局流中。
2. 打开对话框时，通过requestAnimationFrame确保浏览器先完成对话框的初始渲染，再应用过渡样式，避免样式突变。

完整代码示例 #

HTML

<button id="open-button">Open Dialog Element</button>

<dialog>
  <button id="close-button">Close Dialog Element</button>
</dialog>

CSS

button {
  display: block;
}

dialog {
  position: absolute;
  top: 50px;
  margin: auto;
  padding: 0;
  width: 50%;
  height: 50%;
  border: none; /* 去掉默认边框 */
  background-color: red;
  opacity: 0;
  visibility: hidden;
  transition: opacity 2s ease-in, background-color 2s ease-in;
}

/* 打开时触发过渡 */
dialog[open].active {
  background-color: green;
  opacity: 1;
  visibility: visible;
}

JavaScript

const dialog = document.querySelector("dialog");

document.querySelector("#open-button").addEventListener("click", () => {
  dialog.showModal();
  // 触发重绘，确保过渡生效
  requestAnimationFrame(() => {
    dialog.classList.add("active");
  });
});

document.querySelector("#close-button").addEventListener("click", () => {
  // 关闭前先触发反向过渡
  dialog.classList.remove("active");
  setTimeout(() => {
    dialog.close();
  }, 2000); // 等待过渡完成再关闭
});

额外说明 #

• 如果需要保留模态框的遮罩层（showModal()自带的背景），上述方案完全兼容，showModal()仍会正常添加遮罩。
• 关闭时的反向过渡需要先移除active类，等待过渡完成后再调用close()，避免对话框直接消失。

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