使用過渡和JavaScript訂購CSS樣式

Question

如果我將樣式應用於元素，然后立即添加css過渡樣式，則過渡將應用於之前的樣式。 這可能並不總是目的。

我通過使用settimeout（0）找到了解決方案，是否有已知的更清潔/更正確的方法？

http://jsfiddle.net/nicib83/XP9E7/

$("div").css("opacity", 1);

$("div").css("-webkit-transition", "all 0.35s");

/* Works
window.setTimeout(function () {
    $("div").css("-webkit-transition", "all 0.35s");
}, 0);
*/

最好的祝福

編輯：

我並不是說如何最好地設置css樣式，而是當應該應用第一種樣式時應依次設置樣式，而那時第二種樣式不能被激活，但僅在此之后，我想在之后添加過渡。 settimeout修復它，最好的解決方案？

Answer 1

最好預先定義一個包含要應用的兩個屬性的類，然后以編程方式將該類添加到元素中。 這兩個屬性將一起應用。

.myClass {
    opacity: 1;
    -webkit-transition: all 0.35s;
}

$("div").addClass("myClass");

Answer 2

您可以從Twitter Bootstrap的書中摘下一頁：

fade {
    opacity: 0;
    -webkit-transition: opacity 0.15s linear;
    -moz-transition:opacity 0.15s linear;
    -o-transition:opacity 0.15s linear;
    transition:opacity 0.15s linear;
}
.fade.in{
    opacity:1;
}

然后以編程方式添加.in類，以使其淡入：

$("div").addClass("in");

您原始的div看起來像：

<div class="fade">Box</div>

Answer 3

我自己一直對此提出質疑，還找到了setTimeout解決方案。 經過研究后，問題是瀏覽器如何處理計划。 JavaScript在與處理UI和DOM的線程分開的線程中運行（這就是為什么發生UI阻塞的原因）。

在這種情況下，這兩個JavaScript語句都會在文檔注冊第一次更改之前運行，並且最終會同時應用兩個類。 setTimeout（fn，0）有效地使函數異步，並分流在下一個可用時機運行的函數。 這允許UI線程在添加下一個類之前趕上來。