css - 在 css 变换上触发布局

Question

我有一个 div 元素，它具有以下样式 —

  height: '100%',
  willChange: 'transform',
  marginRight: '15px',
  transform: 'translateX(-100%)'

在触摸移动事件中，我更新元素 style.transform 如下 —

el.style.transform = `translateX(${100 * x - 100}%)`

显然是这里的信息https://csstriggers.com/transform这些更改不应导致任何 Layout 更新。但是我仍然在时间线上看到很多 Layout 事件。

Answer 1

Css 转换是一种属性，如果通过 Javascript 使用它，确实会导致浏览器同步计算样式和布局，也就是回流或 Layout trashing .看看这个以了解可能导致布局垃圾的所有可能元素 https://gist.github.com/paulirish/5d52fb081b3570c81e3a

但事情是这样的，根据我的理解，Transform 是浏览器可以轻松地以非常便宜的方式制作动画的属性之一。和

transforms are the best properties to animate because the GPU can assist with the heavy lifting ref: HTML5rocks high performance animations

在 developers.google 上有一个关于避免大型、复杂的布局和布局抖动主题的很好的例子，在底部你可以看到一个关于读写 DOM 的 offsetWidth 的例子。我认为您可以尝试使用转换，我认为它会有所帮助。

编辑:@Tushar 你能为你的问题提供 js fiddle 或建议我如何重新生成确切的问题吗？我也在 git 上用 csstriggers 提出这个问题，以了解有关您的问题的更多见解。 github.com/GoogleChrome/css-triggers/issues/23