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

Question

我正在尝试在全屏覆盖上创建一个过渡，该覆盖是全宽和全高，非活动 styles visibility: hidden和opacity: 0 。 单击汉堡包图标时，将.active class 添加到 div 中，它具有以下 styles： visibility: visible and 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>

Answer 2

似乎可见性没有过渡选项。 所以转换工作不正确。

在.bbfIaB这部分

transition: visibility 500ms ease 0s, opacity 500ms ease 0s;

改成这个

transition: opacity 500ms ease 0s;

更新

在这种情况下，最好的解决方案是：

1. 从 CSS 中的过渡中移除可见性。
2. 移除visibility: hidden; 来自.bbfIaB
3. 添加新的 css class，如 .hidden .hidden {visibility: hidden;}
4. 添加一个JavaScript，去掉.active后会添加.hidden 500ms
5. Class .hidden应默认添加到模板中，应通过激活 class .active

---

更新 2

完全没有visibility转换的工作示例。

 var element = document.querySelector(".element") var toggle = document.querySelector(".element-toggle") toggle.addEventListener("click", function(event) { if (element.classList.contains("active")) { setTimeout(function() { element.style.visibility = ''; }, 500); } else { element.style.visibility = 'visible'; } element.classList.toggle("active"); });

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

 <div class="element">This is a div element</div> <button type="button" class="element-toggle">Toggle</button>