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

Posted 2023-03-06

【中文标题】CSS 过渡：不透明度和可见性过渡不适用于 Firefox（适用于 Chrome / Safari）

【英文标题】：CSS Transition: opacity and visibility transition not working on Firefox (works on Chrome / Safari)

【发布时间】：2020-07-31 14:21:56

【问题描述】：

我正在尝试使用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 上不起作用？

【参考方案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>

【讨论】：

欢迎来到 SO！不错的答案。以后或在这个答案中，您还可以使用code snippet option 为您的答案添加实时代码！这将使未来的访客和 OP 他/她自己的生活更轻松。

在 Firefox 中测试了您的代码。单击 1 或 2 次后 - 开始出现相同的问题。淡出没有过渡。

@focus.style，这很奇怪。我已将 sn-ps 添加到答案中，并在 Firefox 中查看了它们。似乎首先显示问题，然后解决方案对我正常工作。

确实如此。第二个稳定。

我希望我们知道为什么有些浏览器破坏了“可见性”属性的动画能力。如果有人发现了什么，请告诉我们！

【参考方案2】：

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

在.bbfIaB这部分

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

改成这个

transition: opacity 500ms ease 0s;

更新

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

从 CSS 中的过渡中移除可见性。 从.bbfIaB 中删除visibility: hidden; 添加新的css类，如.hidden visibility: hidden; 添加一个javascript，删除.active后会添加.hidden 500ms 默认情况下应将.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>

【讨论】：

根据这篇文章接受的答案，您可以转换可见性属性：***.com/questions/3331353/…

这个接受的答案告诉了另一点。 ***.com/questions/27900053/…

是的，我明白了，现在在接受列表中的可见性。但它在 Firefox 中工作不正确，我们现在不能用它做任何事情。用可能的解决方案更新了答案。 developer.mozilla.org/en-US/docs/Web/CSS/…

如果它在文档中作为可动画属性出现，那么给出了什么？我相当确定以前版本的 FF 已经能够为不透明度/可见性设置动画。

是的。我看，现在它在文档中。有趣的是，无论有没有控制台，它在 FF 中的工作方式都不同。我认为，int 的 FF 错误。我建议不要使用可见性。昨天更新了我的回答，提出了一些建议。