樣式渲染后的回調

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);