使用 transform 而不是 width/height 的 div 的动画尺寸来实现 GPU 加速
Animating dimensions of a div using transform instead of width/height for GPU acceleration
来自https://engineering.gosquared.com/optimising-60fps-everywhere-in-javascript：
It’s worth noting also that if you’re aiming for smooth animations on mobile devices, you should aim wherever possible to only animate properties like transform and opacity that can be animated entirely using GPU acceleration. Mobile devices’ processors are, as a rule, pretty terrible in comparison to their GPUs. As a result it’s best to avoid animating width or height or other such properties. With a little extra effort it’s usually possible to (for example) animate an element’s transform inside another element with overflow: hidden to achieve the same effect as changing its dimensions.
这听起来很聪明，但我不确定他们在说什么，而且我也没有找到任何解释。确切地说，人们如何能够使用 overflow: hidden 为另一个元素内的元素 transform 设置动画，以实现更改其 width 和 height 的 GPU 加速版本？
背后的想法是用外部负偏移抵消内部正偏移，这很像同时改变宽度和高度。
检查此示例：http://jsbin.com/zacozo 根据您的代码。
注意：我无法使用蓝色边框使它看起来正确，但您可以将两个元素包装到具有蓝色边框的 parent（grandparent 哈！）中。
来自https://engineering.gosquared.com/optimising-60fps-everywhere-in-javascript：
It’s worth noting also that if you’re aiming for smooth animations on mobile devices, you should aim wherever possible to only animate properties like
transformandopacitythat can be animated entirely using GPU acceleration. Mobile devices’ processors are, as a rule, pretty terrible in comparison to their GPUs. As a result it’s best to avoid animating width or height or other such properties. With a little extra effort it’s usually possible to (for example) animate an element’stransforminside another element withoverflow: hiddento achieve the same effect as changing its dimensions.
这听起来很聪明，但我不确定他们在说什么，而且我也没有找到任何解释。确切地说，人们如何能够使用 overflow: hidden 为另一个元素内的元素 transform 设置动画，以实现更改其 width 和 height 的 GPU 加速版本？
背后的想法是用外部负偏移抵消内部正偏移，这很像同时改变宽度和高度。
检查此示例：http://jsbin.com/zacozo 根据您的代码。
注意：我无法使用蓝色边框使它看起来正确，但您可以将两个元素包装到具有蓝色边框的 parent（grandparent 哈！）中。