CSS 过渡：不透明度和可见性过渡不适用于 Firefox（适用于 Chrome / Safari）

Question

我正在尝试在全屏覆盖上创建一个全宽和全高的过渡，并且具有非活动样式visibility: hidden和opacity: 0。单击汉堡包图标时，.active会向 div 添加一个类，它具有以下样式：visibility: visible和opacity: 1。

这是CSS：

  .overlay {
    position: fixed;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: '#272727';
    z-index: 100;
    transition: visibility 500ms ease, opacity 500ms ease;
    visibility: hidden;
    opacity: 0;
    &.active {
      visibility: visible;
      opacity: 1;
    }
  }

在 Chrome 和 Safari 上，转换按预期进行，但在 Firefox 上，转换的“淡入”部分失败。它基本上是从第一帧跳到最后一帧而不进行转换。如果您想查看该页面的实际效果，请点击以下链接：链接至网页

如果您无法在浏览器屏幕录制中重现问题，则会出现一段视频：

为什么此转换在 Firefox 上不起作用？

Answer 1

我认为这是由于可见性在过渡中发生变化并且浏览器之间的显示不一致所致。

这演示了您的代码，对于我来说，在 Firefox 中，如果您快速切换元素，它不会顺利过渡。我一直都是这样完成类似的转换，直到最近才开始注意到这个问题。

var element = document.querySelector(".element")
var toggle = document.querySelector(".element-toggle")

toggle.addEventListener("click", function(event) {
  element.classList.toggle("active");
});

.element{
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 500ms ease;
}

.element.active{
  opacity: 1;
  visibility: visible;
}

<div class="element">This is a div element</div>

<button type="button" class="element-toggle">Toggle</button>

经过审查后，这对我有用：

var element = document.querySelector(".element")
var toggle = document.querySelector(".element-toggle")

toggle.addEventListener("click", function(event) {
  element.classList.toggle("active");
});

.element{
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 0s ease 500ms;
}

.element.active{
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms ease, visibility 0s ease 0s;
}

<div class="element">This is a div element</div>

<button type="button" class="element-toggle">Toggle</button>