Question

我想通过＆＃34; insertAfter＆＃34;插入一个元素。之后我想添加一个Class，以触发css动画。

当我使用Time Out执行此操作时，它可以正常工作：

第一种方法（超时）

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

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

第二种方法（没有超时）

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

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

我在这里做了一个小提琴：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");
});

Answer 2

向DOM添加内容需要一些时间，我认为它是异步工作的。这意味着在元素实际出现在DOM中之前完成向元素添加类。所以它认为不，你应该使用超时。

UPDATE 在https://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-created-dom-elements/

找到了更好的解决方案

Answer 3

添加新div时，请确保先隐藏它，添加新类，然后淡入新div。

查看小提琴。 http://jsfiddle.net/schwietertj/mtxf6vx0/

$(document).ready(function(){
$("#1").click(function(){
    var $content = $("<div class='red'></div>");
    $content.insertAfter($("#2"));
    setTimeout(function(){
        $content.addClass("blue"); 
    }, 100);
});
$("#2").click(function(){
    var $content = $("<div class='red'></div>");
    $content.insertAfter($("#2")).hide();
    $content.addClass("blue").fadeIn(500);
});
});

Answer 4

这不起作用，因为在将div标签附加到文档后，立即更改类名称，CSS引擎无法看到此更改以运行动画。要解决此问题，您可以使用以下代码：

DEMO

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

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

4 个答案: