使用轉換和JavaScript訂購CSS樣式

如果我將樣式應用於元素並且隨後添加css轉換樣式，則將轉換應用於樣式前面。這可能並不總是意圖。使用轉換和JavaScript訂購CSS樣式

我發現了一個解決方案，使用settimeout（0），有沒有更清晰/更正確的方法已知？

$("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修復它，最好的解決方案？

來源

2013-01-11 nici

我會建議添加CSS類，而不是直接在CSS中應用樣式。至於你的問題，立即應用樣式是* cascading *樣式表中適當的行爲。 – Jason

「事後」 - 之後？頁面加載？點擊？ – Jason

我介紹的元素，初始樣式的變化應該在沒有過渡的情況下完成，在初始狀態設置之後立即添加過渡屬性，以便在過渡時應用任何更多的樣式變化，簡單的解決方案可以是僅應用在稍後的事件之前進行轉換，我的問題更多地涉及是否可以設置樣式，然後在沒有將transiton應用於前一個語句的情況下進行轉換，似乎瀏覽器需要中斷（通過settimeout實現）以做重繪 – nici

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

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

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

來源

2013-01-11 19:14:28 XML

看到我在帖子中的編輯... – nici

你可以從你的書Twitter的引導的取頁：

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>

來源

2013-01-11 19:16:23 Jason

看到我在帖子中編輯... – nici

我一直在反對這個自己，也發現了setTimeout解決方案。經過一番研究後，問題是瀏覽器如何處理調度。 JavaScript運行在它自己的線程中，與處理UI和DOM的線程分開（這就是爲什麼像UI阻塞這樣的問題發生的原因）。

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

來源

2013-11-07 15:30:38 Chao

使用轉換和JavaScript訂購CSS樣式

回答

相關問題