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 上失败。它基本上是从第一帧跳到最后一帧而没有过渡。如果您想查看该页面的实际操作，请点击以下链接：link to webpage

如果您无法在浏览器上复制该问题screen recording，则会出现一个视频：

为什么这种转换在 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. 从.bbfIaB 中删除visibility: hidden;
3. 添加新的css类，如.hidden {visibility: hidden;}
4. 添加一个JavaScript，删除.active后会添加.hidden 500ms
5. 默认情况下应将.hidden 类添加到模板中，应在激活.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>