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通過類更改動畫 - 不起作用

回答

相關問題