css Firefox中的动画对话框：：background

5q4ezhmt 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(97)

我正在尝试使用CSS使我的对话框组件的：：background伪元素。我已经能够在Edge和Chrome上实现它，但似乎Firefox没有正确应用过渡。
有谁知道FF不支持这一点，或者我的代码是错误的？模态本身尊重不透明度过渡，它只是立即出现的：：background伪元素。
这是我用来快速验证概念的代码：

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>

css

来源：https://stackoverflow.com/questions/75313685/animating-dialog-backdrop-in-firefox

1条答案

按热度按时间

wnrlj8wa1#

是的，我检查了-似乎transition和animation的::backdrop都不能在firefox中工作。
作为替代，我建议将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);

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.如果你想在关闭dialog时有动画：*

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.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>

赞(0）回复(0）举报 2023-06-25

我来回答

css Firefox中的动画对话框：：background

1条答案

相关问题

热门标签

最新问答