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

我想通过“insertAfter”插入一个元素。之后我想添加一个Class来触发一个css动画。jquery插入元素，然后做css通过类更改动画 - 不起作用

时，即时通讯与超时工作原理这样做：

第一种方法（带超时）

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

不过，这并不当我加入类直接插入后工作元件：

第二方法（无超时）

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

有没有另一种解决方案？我不想使用超时功能。

我已经在这里提琴：http://jsfiddle.net/b2eybnoy/

来源

2014-12-04 Vieper

你应该带班'red'添加元素，而不是将其更改为'blue'。没有动画，导致元素已经是蓝色......想想这个问题会在5秒内自毁...... – skobaljic 2014-12-04 15:16:56

看看小提琴，这正是我在做的！ – Vieper 2014-12-04 15:19:01

彩色动画正在工作，但。它没有显示，因为没有时间差距显示效果。 – 2014-12-04 15:24:41

一个更好的解决方案这是因为CSS过渡是基于渲染风格正在改变。

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

Alternativelly到setTimeout，你可以使用一些技巧来强制浏览器在视觉上呈现元素的风格，就像调用一个可视化特性：

Updated JsFiddle

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

来源

2014-12-04 15:26:30 LcSalazar

你也可以插入隐藏div，而不是显示它 - [fiddle]（http://jsfiddle.net/b2eybnoy/7/），这也将强制渲染。 – skobaljic 2014-12-04 15:33:50

不错，有效。非常感谢。我确信有一个解决方案，但我希望有一些像 $ content.insertAfter（$（“＃2”））。waitUntilElementIsRendered（）。addClass（“blue”）; 解决方案偏移（）对性能不利吗？ – Vieper 2014-12-04 15:39:25

@Vieper - 不客气。不是性能问题。你只是要求一个视觉财产，它会与其他许多人一起工作。它只是强制浏览器在此批处理中呈现元素，而不是等到它结束为止 – LcSalazar 2014-12-04 15:41:10

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

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

来源

2014-12-04 15:26:10 Timofey

不错，谢谢你的链接。这也应该起作用。我现在使用.offset（）等待，直到元素完全呈现。 – Vieper 2014-12-04 15:43:58

我认为你可以使用任何函数检索元素的某个位置，因为它强制元素重新渲染。 – Timofey 2014-12-04 15:48:54

是的，这就对了。 ;） – Vieper 2014-12-04 15:51:18

当您添加新的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); 
}); 
});

来源

2014-12-04 15:28:20 schwietertj

对不起，但这不是什么即时搜索。我不想隐藏元素，我不想使用jquery动画“FadeIn”。我想完全使用CSS动画。 – Vieper 2014-12-04 15:32:58

我刚刚意识到你的代码中有css动画。我的错。 – schwietertj 2014-12-04 18:20:23

这是行不通的，因为div标签附加到文件后，立即更改类名和CSS引擎看不到这种变化运行的动画。为了解决这个问题，你可以使用此代码：

DEMO

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

来源

2014-12-04 15:41:32

不错，那也行。但我不喜欢使用jQuery的功能，如显示，因为它也做一些我不需要的东西。例如添加样式属性：“overflow：hidden”。但不管怎么说。谢谢！ – Vieper 2014-12-04 15:49:51

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

回答

相关问题