javascript - 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 只是出现在那里。

知道为什么会发生这种情况，如何防止它，或者，如果不可能，当元素准备好移动/动画时获取回调？

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 的触发速度比页面刷新/重绘的速度快，因此 css 转换没有机会触发。

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

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