javascript - 样式渲染后的回调

Question

在应用过渡样式之前，应应用和渲染所有非过渡样式。这就是为什么应该存在这样的回调。

演示

<button class="toggle">toggle</button>
<div class="overlay"></div>

.overlay {
  width      : 400px;
  height     : 400px;
  background : gray;

  display    : none;
  opacity    : 0;
  transition : opacity 0.3s ease-in-out;
}
.overlay.visible {
  opacity : 1;
}

var overlay = $(".overlay");
$(".toggle").click(function() {
  if (overlay.hasClass("visible")) {
    overlay.removeClass("visible").one("transitionend", function () {
      overlay.css("display", "none");
    });
  } else {
    overlay.css("display", "block");
    setTimeout(function () {
      overlay.addClass("visible");
    }, 0);
  }
});

您可以看到灰色块在 chrome 中平滑地淡出，但在 Firefox 中会跳跃。

setTimeout(function () {
}, 0);

零超时对于 Firefox 来说是不够的。我已经检查过在我的机器上 5 毫秒可以正常工作 50/50。

我应该联系这种痛苦的父亲还是有什么解决办法？

Answer 1

是的，在 Firefox 和 IE 上，您需要getComputedStyle额外使用

var el = overlay[0];
el.style.display = 'block';

// force reflow
getComputedStyle(el).width;

setTimeout(function() {
    overlay.addClass("visible");
}, 0);