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使用确实导致浏览器同步计算样式和布局a.k.a reflow或Layout trashing。看看这个，了解可能导致布局垃圾的所有可能元素https://gist.github.com/paulirish/5d52fb081b3570c81e3a

但是这里的东西，根据我的理解，Transform是浏览器可以动画的属性之一非常便宜轻松。和

变换是动画的最佳属性，因为GPU可以协助举重参考：HTML5rocks high performance animations

在developers.google上有关于避免大型，复杂布局和布局颠簸主题的一个很好的例子，在底部你可以看到写入DOM时读取offsetWidth的例子。我认为你可以尝试改变，我认为它可能会有所帮助。

编辑：@Tushar你可以为你的问题提供js小提琴或建议我如何重新生成精确的探测器？我正在用git上的csstriggers提出这个问题，以便更多地了解你的问题。 github.com/GoogleChrome/css-triggers/issues/23

在css转换上触发布局

1 个答案: