我正在尝试使用 CSS 制作对话框组件的 ::backdrop 伪元素。我已经能够在 Edge 和 Chrome 上实现它，但 Firefox 似乎没有正确应用转换。
有谁知道 FF 是否不支持，或者我的代码是错误的？模态本身尊重不透明度过渡，它只是立即出现的 ::backdrop 伪元素。
这是我用于快速概念证明的代码：
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()
dialog.classList.add('active')
}
function close() {
dialog.close()
dialog.classList.remove('active')
}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; …