jQuery.append() 在与转换一起使用时出现异步

Question

看起来，如果为元素设置了动画，则以下两个框的行为会有所不同，具体取决于它们是已经在 dom 中还是很快被 jQuery.append 添加了（ ):

jQuery(document).ready(function() {
    var el1 = jQuery("<div id='movedElement1'>moved element 1</div>");
    jQuery(document.body).append(el1);
    el1.css({
        top: 200
    });

    var el2 = jQuery("#movedElement2");
    el2.css({
        top: 200
    });
});

可以在 https://jsfiddle.net/omz0w9pp/1/ 找到完整的示例。 Box2 移动到新位置（如预期的那样），而 box1 只是出现在那里。

知道为什么会发生这种情况，如何防止它发生，或者，如果不可能，请在元素准备好时获得回调 moved/animated?

Answer 1

尝试在设置 css 之前立即调用 $(el1).offset()。 https://jsfiddle.net/omz0w9pp/2/

jQuery(document).ready(function() {
    var el1 = jQuery("<div id='movedElement1'>moved element 1</div>");
    jQuery(document.body).append(el1);
    $(el1).offset();
    el1.css({
        top: 200
    });

    var el2 = jQuery("#movedElement2");
    el2.css({
        top: 200
    });
});

发生的事情是 JavaScript 比页面 refresh/repaint 触发得更快，因此 css 转换没有机会触发。

调用 .offset() 会强制重绘页面，因此当您调整 css 时，转换会意识到值的变化并相应地触发。

您也可以使用超时（或任何强制重绘的方法），但我喜欢这种方法。

jQuery.append() 在与转换一起使用时出现异步

jQuery.append() appearing async when using with transitions

javascript

css

jquery

animation

css-transitions