JQuery .animate真的在Chrome擴展中變得不穩定

Question

• 我有一個JQuery .animate函數。
• 它在兩種形式之間切換。
• 它切換高度和不透明度。

當兩個窗體的高度相同（並且彈出窗口不調整大小）時，動畫是平滑的。當彈出窗口必須調整大小時，動畫會變得波濤洶涌，並在彈出窗口周圍出現一個粗黑色邊框幾秒鐘。

無論如何平滑動畫或我應該切換到CSS動畫？

現在，擴展是，當一個標籤被點擊時，一個新的表單出現在舊的表單上。

Answer 1

很可能您的jQuery動畫功能使用2D動畫。請考慮使用3D轉換和轉換。

爲什麼3D比2D要快？

因爲3D使用GPU加速渲染，2D不會。

我不久前做了同樣的事情，結果非常優越。

Answer 2

它是2017。你絕對應該切換到CSS轉換。

Answer 3

1）不要在Chrome擴展中使用jQuery。這是一個瀏覽器標準化框架，您將其用於只能在一個瀏覽器中運行的組件中。而是使用Chrome支持的高級功能（例如被動事件），但jQuery不支持。

2）避免改變元素的高度，這會改變其他元素的大小/位置（或擴展彈出）。

取而代之，只需使用opacity和transform絕對定位元素上的CSS元素，以確保GPU可以處理整個動畫而無需重排。