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 additionaly

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

// force reflow
getComputedStyle(el).width;

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

渲染样式后回调

1 个答案: