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

发件人：

另外值得注意的是，如果您的目标是在移动设备上实现平滑动画，则应尽可能只对可完全使用GPU加速的属性（如

transform

和

opacity

）进行动画设置。通常，移动设备的处理器与GPU相比相当糟糕。因此，最好避免设置宽度、高度或其他类似属性的动画。通过稍微额外的努力，通常可以（例如）在另一个元素内使用

溢出：隐藏
设置元素的
变换
动画，以获得与更改其尺寸相同的效果

这听起来很聪明，但我不确定他们在说什么，我也没有找到任何解释。确切地说，一个人如何能够在另一个元素内部通过
溢出：隐藏
来设置元素的
变换
动画，以实现GPU加速版本的更改其
宽度
和
高度
？
背后的想法是用外部负偏移抵消内部正偏移，这很像改变宽度和高度

检查此示例：基于您的代码

注意：我无法使用蓝色边框使其看起来正确，但您可以将这两个元素包装到一个具有蓝色边框的父元素（祖父母哈！）。
我猜它是指包含元素（带有
溢出：隐藏
）作为其内部对象的遮罩。例如，如果容器200x200px div中有一个1000x1000px div，则最终结果将看起来像一个200x200px正方形。诚然，我不熟悉这个概念，但也许这会触发移动设备上的GPU渲染？好吧，我想做的是：问题是它不是GPU加速的。这是：但显然这是一个不同的结果。我正在尝试使用CSS
transform
获得第一个的外观，因为这是GPU加速的特性。GoSquared post暗示这是可能的。应该可以将
.outer
偏移50像素（缩放时将变为100，从而保持左上角的位置），并将
.inner
缩放到其原始大小的50%（0.5）。出于某种可怕的原因，如果我这样做，
…（“.inner”）.style.transform=“scale（0.5,0.5）”文本消失：我禁用了
溢出：隐藏
，并找到了文本消失的原因。这是因为当你向下缩放
内部
时，它会固定在中心，而不是左上角。因此，当关闭“溢出：隐藏”时，您可以在一瞬间看到它仍然存在。我通过执行
…（“.inner”）.style.transform=“scale（0.5,0.5）translate（-500px，-500px）”修复了这个问题：这看起来仍然不完美，但至少我们正在取得进展。啊哈。将
转换持续时间：500ms
添加到
内部
修复了它，主要是：仍然有这种奇怪的脉冲在进行，但我们在那里的比例是99%。。。