Firefox中dialog::backdrop过渡动画失效问题求助

Firefox中dialog::backdrop的过渡失效并非完全不支持该特性，而是浏览器对::backdrop元素的创建时机和过渡触发逻辑有特殊处理——当调用dialog.showModal()后，::backdrop元素才会被插入DOM，此时立刻添加active类，Firefox会认为初始状态和目标状态同时生效，直接跳过过渡动画。而Chrome/Edge会自动处理这个时序问题，允许过渡正常触发。

修复方案 #

1. 调整JS逻辑，适配Firefox时序 #

利用requestAnimationFrame延迟添加激活类，同时优化关闭逻辑确保过渡完成后再关闭弹窗：

const dialog = document.querySelector('dialog')
const openBtn = document.querySelector('#openBtn')
const closeBtn = document.querySelector('#closeBtn')

openBtn.addEventListener('click', open)
closeBtn.addEventListener('click', close)

function open() {
  dialog.showModal()
  // 等待浏览器完成一次渲染循环，确保::backdrop已以初始状态存在
  requestAnimationFrame(() => {
    dialog.classList.add('active')
  })
}

function close() {
  dialog.classList.remove('active')
  // 监听过渡结束事件，完成后再关闭弹窗
  const handleTransitionEnd = () => {
    dialog.close()
    dialog.removeEventListener('transitionend', handleTransitionEnd)
  }
  dialog.addEventListener('transitionend', handleTransitionEnd)
}

2. CSS代码无需修改 #

你的原有CSS语法和逻辑都是正确的，保持不变即可：

dialog {
  opacity: 0;
  transition: opacity cubic-bezier(0.35, 0, 0.2, 1) 2s;
}

dialog.active {
  opacity: 1;
}

dialog::backdrop {
  background: black;
  transition: opacity cubic-bezier(0.35, 0, 0.2, 1) 2s;
  opacity: 0;
}

dialog.active::backdrop {
  opacity: 0.8;
}

3. HTML结构保持原样 #

<dialog>
  <p>test nice</p>
  <button id="closeBtn">close dialog</button>
</dialog>
<button id="openBtn">
  open dialog
</button>

原理说明 #

• 打开弹窗时：requestAnimationFrame将添加active类的操作推迟到下一次浏览器渲染周期，此时::backdrop已经以opacity:0的初始状态渲染完成，添加类后浏览器会正常计算过渡动画。
• 关闭弹窗时：先移除active类触发过渡效果，等过渡结束事件触发后再调用close()，避免弹窗直接消失导致过渡中断。

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