構建元素時，我可以暫時關閉所有CSS3過渡/動畫嗎？

我爲網站創建了一個相當複雜的菜單。該菜單來自基於CSS3的大量動畫。但是，當我導航到不同的頁面時，菜單應該最初建立 - 並且沒有所有動畫，但是完成JS明智而不是服務器端。構建元素時，我可以暫時關閉所有CSS3過渡/動畫嗎？

現在我想知道我怎麼會暫時完全禁用所有的轉換/動畫，直到菜單建成。

我想到了創建覆蓋動畫的子類，但它似乎沒有工作，因爲它始終是正在使用的基類中定義動畫/過渡？

2011-11-29 SquareCat

潛在的相關：http://stackoverflow.com/questions/11131875/what-is-the-cleanest-way-to-disable-css-transition-effects-temporarily –

我建議通過多數民衆贊成由JavaScript添加的菜單建成後一類應用你的動畫/過渡。

有animation-play-state屬性可以暫停動畫，但只在Safari 5和Chrome 4中出現（前綴）（與其他動畫屬性相反，Safari 4和Chrome 2），並且我不確定是否它會爲你的目的工作。

2011-11-29 13:21:01

我有這種感覺，你是絕對正確的。我有這種令人難以置信的快樂感覺，因爲在寫這些2.500行之前沒有想過這個。儘管我仍然夢想着一個更簡單的解決方案 – SquareCat

我知道你的意思。不確定是否更容易 - 當菜單開始構建時，您可以通過JavaScript刪除有問題的類，並在完成後重新添加它。（雖然如果除了動畫以外還有其他類型的風格，你也會失去這些風格。） –

是的，就是這一點。這非常複雜。對我來說，通常是一個謎，就是爲什麼不可能用一個新類來設置過渡/動畫，從而能夠覆蓋之前定義的過渡/動畫。如果可能的話，例如「淡入淡出」轉換的定時可能不同於相應的「出現」轉換（當從不透明度0-1和反轉設置時） – SquareCat

您可以在構建菜單時將transition-duration設置爲0s，然後將其設置回所需的值。

2012-07-03 13:11:00 Jasper

回答