在Firefox中为对话框添加动画背景

Question

我正在尝试使用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;
}

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

- Thomas Herbst

Answer 1

是的，我检查了 - 在火狐浏览器中似乎既不支持transition也不支持animation用于::backdrop。
作为替代方案，我建议将box-shadow设置给dialog。

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

openBtn.addEventListener('click', open);
closeBtn.addEventListener('click', close);
dialog.addEventListener('keydown', event => {
    if ( event.key === 'Escape' ){
        event.preventDefault();
        close();
    }
});

function open() {
  dialog.showModal();
  dialog.classList.add('active');
}

function close() {
  dialog.close();
  dialog.classList.remove('active');
}

dialog {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.35, 0, 0.2, 1);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .8);
}

dialog.active {
  opacity: 1;
}

dialog::backdrop {
  display: none;
}

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

P.S. 如果您希望在关闭对话框时有动画效果：

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

openBtn.addEventListener('click', open);
closeBtn.addEventListener('click', close);
dialog.addEventListener('keydown', event => {
    if ( event.key === 'Escape' ){
        event.preventDefault();
        close();
    }
});

function open() {
  dialog.showModal();
  dialog.classList.add('active');
}

function close() {
  dialog.style.pointerEvents = 'none'; /* to prevent events during animation */
  dialog.classList.remove('active');
  setTimeout(() => {
      dialog.close();
    dialog.style.removeProperty('pointer-events')
  }, 2000); /* 2000 - is transition-duration in ms */
}

dialog {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.35, 0, 0.2, 1);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .8);
}

dialog.active {
  opacity: 1;
}

dialog::backdrop {
  display: none;
}

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

- imhvost

---

@DanielKaplan 感谢你的评论。你说得对...我会在有空的时候尝试解决这个问题。 - undefined

@DanielKaplan 谢谢你的评论。你说得对...我会在有空的时候尝试解决这个问题。 - imhvost

@DanielKaplan 更新了答案 - undefined

@DanielKaplan 更新了答案 - imhvost

你的更新有效，谢谢。顺便说一下，你也可以听一下close事件。（我相信那个兼容性表格已经过时/错误。在我的安卓手机上，监听和处理这些事件的方式与桌面浏览器相同。我已经向MDN报告了这个问题。） - undefined