使用 CSS 过渡淡入 Firefox答案

【问题标题】：Fade in with CSS transition Firefox使用 CSS 过渡淡入 Firefox
【发布时间】：2019-09-03 20:20:58
【问题描述】：

我想在用户单击按钮时使用 CSS 过渡淡入叠加层。

覆盖元素的样式为：transition: opacity 1s

我正在使用 jQuery 将显示从 none 设置为 block，然后在短暂延迟后将不透明度设置为 1：

overlay.css('display', 'block');

setTimeout(function() {
    overlay.css('opacity', 1);
}, 10);

没有延迟，叠加层将以完全不透明度显示。

这适用于大多数浏览器（Chrome、Safari、Internet Explorer 11、Edge...），但在 Firefox 中通常不会发生这种转换。较长的超时使 Firefox 更可靠，较短的超时将使其几乎从不显示转换。

在设置不透明度之前，如何可靠地等待 display: block 应用？

function show() {
  $('#square').css('display', 'block');

  setTimeout(function() {
    $('#square').css('opacity', 1);
  }, 5);
}

function hide() {
  $('#square').css('display', 'none');
  $('#square').css('opacity', 0);
}

#square {
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0;
  display: none;
  transition: opacity 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="show()">Show</button>
<button onClick="hide()">Hide (no animation)</button>
<div id="square"></div>

【问题讨论】：

请添加您的html和css。甚至更好地让 sn-p 重现您的问题。
我只能推测 Quantum CSS buggy（或太快） - 所以，这看起来很老套，但 requestAnimationFrame(() => requestAnimationFrame(() => overlay.css('opacity', 1)) ); 保证可以工作（在所有测试中都有） - 嵌套动画帧，因为第一个回调可能发生得太早 - 第二个总是在适当的时间发生
@JaromandaX 通过获取元素的 offsetHeight 而不是使用超时来强制回流似乎始终有效。

标签： javascript jquery css firefox settimeout

【解决方案1】：

不确定原因，但似乎 Firefox 新的 Quantum CSS 有问题，因为您所做的应该可以工作

玩弄它，我想我会尝试将不透明度更改放在请求动画帧中，但失败的次数与您的代码大致相同

然后，我嵌套了 requestAnimationFrame ...它似乎可以工作。我所能推测的是，当第二个动画帧被触发时（即元素显示后大约 16 到 32 毫秒），仍然不可见的元素的渲染已经完成，所以动画可以发生（我把它编成我一起去，你能告诉）

function show() {
  $('#square').css('display', 'block');
  requestAnimationFrame(() => requestAnimationFrame(() => $('#square').css('opacity', 1)));
}

function hide() {
  $('#square').css('display', 'none');
  $('#square').css('opacity', 0);
}

#square {
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0;
  display: none;
  transition: opacity 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onClick="show()">Show</button>
<button onClick="hide()">Hide (no animation)</button>
<div id="square"></div>

【讨论】：

【解决方案2】：

通过获取元素的offsetHeight 而不是超时来强制重排似乎在所有浏览器中都有效：

$('#square').css('display', 'block');
$('#square').get(0).offsetHeight;
$('#square').css('opacity', 1);

【讨论】：

【解决方案3】：

使用可见性！

像这样：

<DOCTYPE html>
<html>
<head>
<style>
[ui="overlay"]
{
  display: block; /* always a block */
  z-index: 2;

  position: fixed;
  left: 0; 
  top: 0;
  width: 100vw; /* 100% of viewport width */
  height: 100vh; /* 100% of viewport height */

  background-color: rgba(0,0,0,0.8);

  transition-property: visibility, opacity;
  transition-duration: .0s, .5s; /* change only .5s opacity duration */
}

[ui="overlay"][ui-state="0"]
{
  transition-delay: .5s, .0s; /* visibility delay = opacity duration */
  transition-timing-function: ease-out;
  visibility: hidden;
  opacity: 0;
}

[ui="overlay"][ui-state="1"]
{
  transition-delay: .0s, .0s; /* no visibility delay */
  transition-timing-function: ease-in;
  visibility: visible;
  opacity: 1;
}
</style>
</head>
<body>

<div ui="overlay" id="mainOverlay" ui-state="0">
  <button ui="target-state" ui-target="#mainOverlay" ui-target-state="0">X</button>
</div>

<button ui="target-state" ui-target="#mainOverlay" ui-target-state="1">Show overlay</button>

<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script>
$(document).ready(function(){
  $('[ui="target-state"]').on('click',function(){
    var t = $(this).attr('ui-target');
    var s = $(this).attr('ui-target-state');
    $(t).attr('ui-state', s);
  });
});
</script>
</body>
</html>

【讨论】：