CSS 3與不透明度的轉換 - Chrome和Firefox

Question

我一直在玩CSS3轉換以淡入覆蓋div，當我遇到了一個奇怪的問題時。

基本上我有一個div元素，它的樣式設置爲id - 即background-color：＃000，opacity：0等。以及瀏覽器特定的轉換樣式。默認情況下，overlay元素上有一個「hiddenElement」類，將其設置爲none。

當要顯示疊加層時，hiddenElement類將被刪除，而另一個類將添加「初始化」類，此類將元素不透明度設置爲0.6。

我期望發生的事情是元素能夠流暢地動畫，這在Opera中發生，但是在firefox和chrome中它並不像那樣工作。

我在這裏構建了一個獨立的案例：http://jsbin.com/obojet/27/。你可以看到，當「addClass（'Initialised'）」包含在setTimeout（）中時，即使在chrome中超時時間爲0ms，它也可以正確地進行動畫處理。只是在超時之外做addClass，不會做動畫。在Firefox中，超時時間必須更長 - 50ms。在歌劇中它只是起作用。

這可能是UI/Javascript競爭單線程，但我只是好奇是否有其他人遇到類似的問題。

Answer 1

我遇到過各種各樣的問題。這是CSS3轉換規範中非常糟糕的一部分，因爲規範沒有提到這種類型的行爲。

可預測的方式來做到這一點是：

1. 設置對象的初始狀態。
2. 在對象上設置與轉換相關的CSS3。
3. 此時，對象不得爲display: none。
4. 讓瀏覽器返回到事件循環並重繪任何需要重繪以建立預動畫狀態的內容。
5. 然後向設置最終狀態並觸發動畫的對象添加一個類。
6. 返回瀏覽器事件循環以進行動畫。

不可預知的方式做到這一點是：

1. 任何涉及顯示：沒有在任何狀態。
2. 設置初始狀態和CSS3轉換規則
3. 設置最終狀態而不讓瀏覽器返回到事件循環。
4. 回到事件循環（通常情況下，CSS3轉換不會進行）。

我看到能夠以編程方式一次更改一大堆屬性的價值，而不觸發CSS3轉換的開始。但是，你想用一堆代碼來建立初始狀態並不罕見，以編程方式設置你想要發生的轉換，然後在一段代碼中設置最終狀態。今天，你不能這樣做，並獲得可靠的行爲。你將不得不在中間插入一些setTimeout調用。如果有一個同步函數調用來設置對瀏覽器的初始狀態，那麼最好的辦法是：我正在設置這個對象的初始狀態。我從現在開始做出的任何更改，我希望您包含在我設置的CSS3轉換中。然後，你不需要額外的setTimeout無意義。

你的例子顯示了這種類型的東西。你可以通過讓你的初始狀態爲opacity: 0;而不是display: none;來讓它在沒有setTimeout的情況下工作，儘管我意識到這可能不是你想要的。然後，在建立最終狀態並且轉換應該工作之前，瀏覽器會看到初始狀態（不顯示：無）。