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

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

在。bbfIaB此部分中

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

更改为此

transition: opacity 500ms ease 0s;

更新

在这种情况下的最佳解决方案将是下一个：

1. 从CSS过渡中删除可见性。
2. 从visibility: hidden;中删除.bbfIaB
3. [添加新的CSS类，例如.hidden {visibility: hidden;}
4. [添加JavaScript，删除.hidden后将在500ms内添加.active
5. Class .hidden应该默认添加到模板中，应该在激活class .active的情况下删除