Android 和 PC 上的动画 CSS/JS Jerky答案

【问题标题】：Animation CSS/JS Jerky on Android and sometime PCAndroid 和 PC 上的动画 CSS/JS Jerky
【发布时间】：2022-01-18 17:25:06
【问题描述】：

我创建了一个元素周期表应用程序，并创建了一个动画，其中元素从初始位置移动到窗口中心，但过渡很不稳定。为此，我创建了此元素的副本（单击）并更改为 Class。

动画由 CSS 制作（更新具有其他 Left/Top/Translate 值的类），很少来自 JS（例如：x.style.left = y）

我也尝试创建 CSS ROOT 值并使用 JS 更新它们，但同样的问题。我还尝试删除不必要的最大 JS。也尝试过“无处不在”的请求动画帧。

我没有使用插件，它是一个用同位素制作的 VanillaJS 应用程序。你知道为什么这很迟钝吗？我的 DOM 中是否有太多元素？或者也许我做错了？喜欢这种过渡，所以我很想知道如何优化它！

这是我的项目 JavaScript 的Link（可能会经常更新）。

【问题讨论】：

【解决方案1】：

我最近在使用滑块时遇到了类似的问题。

结论是动画应该使用transform 属性，而不是顶部/底部/左/右，也不能使用margin 或padding。
这是我发现的两篇解释问题的帖子：
Laggy CSS animation
Why transitions for some CSS properties are slow and none fluent

【讨论】：

您好，感谢您的回答！是的，几天前的阅读，尝试了一下（仍然有问题），但我没有通过翻译替换所有左/上等，也许我应该尝试。我正在使用同位素，所以元素在左/上位置是绝对的，我需要处理这个问题
元素仍然可以根据我收集到的内容具有这些属性。但动画需要与transform 一起发生。我知道，这真的很复杂，尤其是当您需要更改现有代码才能工作时。
好的，谢谢！我将尝试通过 Transform 属性更改所有动画 Left/Top...。我应该如何处理 Heiht/Width 属性？规模是唯一的方法？
编辑：我尝试通过转换转换更改所有过渡顶部/左侧等，它正在工作！非常感谢现在我遇到了另一个问题：宽度和高度，这些属性仍然很不稳定，我尝试使用 RequestAnimationFrame，但我仍然有问题 :(
你也可以使用transform来改变大小，我相信你需要使用transform: scale。你可以在这里阅读：2D Transforms。