当前位置: 首页 > 知识库问答 >
问题:

在不触发重新计算样式的情况下更改 CSS3 转换?

施自明
2023-03-14

尝试以60FPS的速度在屏幕上设置一个具有绝对位置的元素的动画,我注意到大多数CPU时间都由recactStyles使用。

我可以在不触发重新计算样式的情况下更改 element.style.transform 属性吗?

目前我像这样更改位置:el.style.transform='Translate3d(${x}px,${y}px,0px)'

下面是一个演示:http://jsfiddle.net/pLtvxv41/您可以使用GoogleChrome性能开发工具查看重新计算样式函数的用法。

这能以更有效的方式改变吗?

共有1个答案

张华池
2023-03-14

您是否尝试添加 -webkit-transform: translate3d(0,0,0); 默认情况下以避免完全重绘页面?

您还可以尝试< code>will-change行为来通知浏览器转换属性将被更改

.example {
  will-change: transform;
}
 类似资料:
  • 问题内容: 我有一个带有客户文本监视程序的字段。在一段代码中,我需要更改使用的EditText中的值。 问题是,一旦我进行更改,就会调用该方法,从而创建了无限循环。如何在不触发afterTextChanged的情况下更改文本? 我需要afterTextChanged方法中的文本,因此不建议删除。 问题答案: 您可以注销观察者,然后重新注册。 另外,您可以设置一个标志,以便观察者知道自己刚刚更改文本

  • 问题内容: 转到任何GitHub 页面,然后单击任何目录/文件,并观察URL的更改方式,但仅更新页面的一部分。没有整个页面重新加载。 我如何使用jQuery做类似的事情? 这对大多数浏览器都有效吗(我使用的是Chrome)? 问题答案: 他们使用历史记录API,或者专门使用。 您可以使用它,不需要jQuery,但是有一些插件,例如history.js。 这适用于大多数浏览器,即Chrome,Saf

  • 问题内容: 我需要一个解决方案将String转换为字节数组,而无需像这样更改: 输入: 输出: 当我使用 那么回复是 但我希望回复是 问题答案: 您应始终确保序列化和反序列化使用相同的字符集,这会将字符映射到字节序列,反之亦然。默认情况下,String.getBytes()和新的String(bytes)使用默认字符集,该字符集可能是特定于语言环境的。 使用getBytes(Charset)重载

  • 我有一个字段,上面有一个客户文本观察者。在一段代码中,我需要更改EditText中的值,我使用<code>.setText(“whather”)来执行此操作。 问题是,只要我做了更改,就会调用<code>afterextchanged 我需要 afterTextChanged 方法中的文本,因此不建议删除 。

  • 我正在尝试从组件更新(添加,删除)查询参数。在angularJS中,由于: 我有一个应用程序,其中包含用户可以过滤,排序等列表,我想在url的查询参数中设置所有激活的过滤器,以便他可以复制/粘贴URL或与其他人共享。

  • 我正在进行drools fusion 6.2决赛,希望在流模式下发生新事件时触发规则。但规则本身并没有遭到抨击。 我的规则文件内容如下: 代码如下: 故意调用规则时会触发规则,但如果流中出现新事件,则无法触发规则。