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无需重排即可处理整个动画。