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>