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

Question

我正在尝试在具有 visibility: hidden 和 opacity: 0 非活动样式的全宽和全高全屏叠加层上创建过渡。单击汉堡包图标时，.active class 会添加到 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 上按预期进行，但过渡的 "fade-in" 部分在 Firefox 上失败。它基本上是从第一帧跳到最后一帧而不进行过渡。如果您想实际查看页面，请点击 link：link to webpage

以及如果您无法在浏览器上重现问题时发生的情况的视频 screen recording：

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

Answer 1

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

在.bbfIaB这部分

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

改成这个

transition: opacity 500ms ease 0s;

已更新

这种情况下的最佳解决方案是：

在 CSS 中移除过渡的可见性。
正在从 .bbfIaB

visibility: hidden;

新增cssclass，喜欢.hidden {visibility: hidden;}
添加一个JavaScript，删除.active

.hidden

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>

Answer 2

我认为这是由于在转换过程中可见性发生了变化，并且似乎在浏览器之间显示不一致。

这演示了您的代码，对我来说，如果您快速切换元素，则在 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>

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

CSS Transition: opacity and visibility transition not working on Firefox (works on Chrome / Safari)

html

css

transition