CSS以編程方式添加類時不會進行動畫效果（但在Chrome中切換類時有效）

我正在嘗試對div的轉換進行動畫製作。CSS以編程方式添加類時不會進行動畫效果（但在Chrome中切換類時有效）

這裏是我的代碼（現在，只考慮最新的Safari瀏覽器爲簡單起見，不要求供應商前綴）：

#mydiv{ 
    transition: all 2.3s cubic-bezier(1, 0, 0, 1); 
    transform: scale(0.5); 
    background:white; 
    padding:30px; 
} 
.visible-popup{ 
    transform: scale(1) !important; 
}

我的DIV沒有visible-popup類起初，我使用jQuery的addClass方法來添加它。然而，我的div跳躍到100％規模沒有動畫。有趣的是，如果我手動在Chrome的開發人員工具中切換visible-popup類的transform屬性，或者如果我只是在檢查器中操作DOM並手動添加/刪除類，那麼確實具有動畫效果。爲什麼當我以編程方式切換課程時，它不是動畫效果？

來源

2016-03-08 Can Poyrazoğlu

我知道在jQuery中你應該使用on（）或bind（）。也許與此有關係？ – dmaij

@dmaij我不明白這些如何與CSS轉換有關？你能否提供一個關於它的資源？ –

我對css的轉換並不熟悉，認爲是專家。我的意思是說，當以編程方式添加元素時，jquery中的事件必須被綁定。 Css不應該有這個'問題'，但它可能會指向你正在尋找的方向。或不是.. – dmaij

有趣。 #mydiv的container div有一個名爲fade的類，它顯然沒有任何影響。當我刪除沒有做任何事的類（在樣式檢查器中檢查）時，我的動畫開始工作。

來源

2016-03-08 11:09:24

在這裏看到一個例子，我不知道你在做什麼，這應該足夠了：

$("#mydiv").toggleClass("visible-popup");

https://jsfiddle.net/y36aer5m/

來源

2016-03-08 10:47:42

是的，這和我的一樣，但由於某種原因，我的工作不正常。有趣的部分是當我在Chrome開發人員工具中手動切換它時，它完美地工作。 –

也許你意外地寫了addClass（「。visible-popup」）而不是addClass（「visible-popup」），野生猜測 –

已檢查。 nope，'addClass'代碼是正確的。該類實際上被添加到DOM元素，我可以在檢查器中驗證這種行爲。 –

CSS以編程方式添加類時不會進行動畫效果（但在Chrome中切換類時有效）

回答

相關問題