使用变换而不是宽度/高度为GPU加速动画div的尺寸

Question

来自https://engineering.gosquared.com/optimising-60fps-everywhere-in-javascript：

  

值得注意的是，如果您的目标是在移动设备上实现流畅的动画效果，您应该尽可能只针对transform和opacity这样的属性设置动画，这些属性可以完全使用GPU加速进行动画处理。与GPU相比，移动设备的处理器通常非常糟糕。因此，最好避免设置宽度或高度或其他此类属性的动画。通过一些额外的努力，通常可以（例如）使用transform为另一个元素内的元素overflow: hidden设置动画，以达到与更改其尺寸相同的效果。

这听起来很聪明，但我不确定他们在谈论什么，我还没有找到任何解释。确切地说，如果能够使用transform为另一个元素内的元素overflow: hidden制作动画，以实现更改其width和{{1}的GPU加速版本}？

Answer 1

背后的想法是用外部负偏移抵消内部正偏移，这非常类似于改变宽度和高度。

根据您的代码检查此示例：http://jsbin.com/zacozo。

注意：我无法使用蓝色边框使其正常显示，但您可以将这两个元素包装到具有蓝色边框的父级（祖父母哈！）中。