Jquery 插入元素，然后通过类更改执行 css 动画 - 不起作用

Question

我想通过“insertAfter”插入一个元素。之后我想添加一个类，以触发CSS动画。

当我在超时的情况下执行此操作时，它会起作用:

第一种方法(带超时)

$content.insertAfter($("#2"));
setTimeout(function(){
    $content.addClass("blue"); 
}, 100);

但是当我在插入元素后直接添加类时它不起作用:

第二种方法(无超时)

$content.insertAfter($("#2")).addClass("blue"); 

还有其他解决办法吗？我不想使用超时功能。

我在这里做了一个 fiddle :http://jsfiddle.net/b2eybnoy/

Answer 1

这是因为 css 过渡是基于正在更改的渲染样式的。

在插入新创建的元素的那一刻，浏览器没有时间渲染它。如果您在第一个命令中更改类，它将不会呈现转换。

除了setTimeout之外，您还可以使用一些技术来强制浏览器以可视方式呈现元素的样式，例如调用视觉属性:

Updated JsFiddle

$("#2").click(function(){
    var $content = $("<div class='red'></div>");
    $content.insertAfter($("#2"));
    $content.offset();
    $content.addClass("blue");
});