javascript - 使用 CSS 过渡淡入 Firefox

Question

我想在用户单击按钮时使用 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>

Answer 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>