CSS性能 - 如何评估 - 滚动上浮动按钮大小的动画（转换）（变换比例与高度/宽度）

Question

介绍性信息： 我在使用移动设备时制作了一个固定的菜单按钮来显示导航菜单。对于这个应用程序，我使用Headroom.js脚本在向下滚动时使按钮变小，以确保它不会阻止过多的内容。通过添加具有给定更改的类来应用动画/转换。

在原始方法中，我通过使用CSS（和css转换）更改父元素的height/width和子元素的padding来更改按钮的大小和外观。

我已经阅读的新方法可能/应该更好，根据不同的网站，使用transform: scale()更改按钮的大小。请注意，我也通过在此方法中应用translate3d(20px,20px,0)来稍微移动元素。但是，使用transform: scale()方法滚动时，感觉>感觉更平滑（虽然可能是安慰剂效果），但使用chrome dev工具＆＃39;时间表给了我看似无效的结果。

因此，我的一部分问题也是我应该如何评估最佳方法。 Chrome Dev工具中的时间轴是最佳选择，还是有更好的方法？我应该根据时间表的哪些要素做出选择？另一方面，基于您对图像和/或测试结合您的知识的解释，哪种方法表现最佳（或理论上应该表现最佳）？

在下面你可以看到每个方法的两个时间轴示例。 更改高度/宽度和填充（原始方法）：

使用transform: scale()更改大小的方法：

此外，您可以在这里尝试不同的方法：
链接：Original method changing height/width and padding
链接到新方法：using transform:scale

请忽略一切的不良布局;特别是按钮。菜单按钮内部的丑陋图像只是为了显示，我自己的页面上的布局中包含了一个图像，并将其纳入性能考虑因素。后面的图像也包括在内，因为它是一个网页商店，有很多图像可能影响性能。

用于在原始方法中进行更改的已添加类的CSS：

.mobile-nav.headroom--unpinned {
    height: 40px;
    width: 40px;
}
.headroom--unpinned .mobile-content{
  padding-top:4px;
}

使用transform:scale()添加的类的CSS：

.mobile-nav.headroom--unpinned {
transform:scale(.5) translate3d(20px,20px,0);
}

总结一下我的问题：
如何评估哪种方法具有最佳性能，以及您认为哪种方法效果最佳？

最后一点：我知道方法是不同的（在原始方法中动画不同的东西和更多的元素），但这些是我喜欢的2个选项，因为它现在。

Answer 1

我相信你错过了这一点，克里斯：除了transform和opacity之外没有其他财产应该被动画的原因是因为他们不会在其他任何事情上触发重画，即使元素在文档流程中（因为在95％的情况下，你基本上可以单独使用这两个）。

从“命中效果”的角度来看，有两种类型的动画：

• 在动画元素以外的其他元素中触发重绘的那些
• 那些没有的人。

这是推荐transform，opacity或position:relative;left|right|top|left动画的主要原因。因为它们实际上并没有在流中移动元素，因此在动画之后不会触发对流中每个其他元素的重绘。

现在，如果所述父级位于绝对位置（我认为是这种情况），那么无论如何都不会触发对DOM的其余部分的重新绘制，因此该方法与{{1}之间存在差异本来是次要的。如你所说，不确定。理论上，重新绘制两个元素而不是一个元素应该更慢。

如果你需要测试， 使用每种方法制作10k克隆并在所有这些克隆上触发动画 。

这将是决定性的。

如果你真的想transform这个（就像我花费了大量的时间在几乎没有明显的改进上，就像我一样），你会发现很多资源可以推荐：

• 将所有min-max替换为.animate()
• 从不动画除了.velocity()或transform以外的任何动画，尽管Velocity声称它们可以动画任何不会影响性能的东西（我觉得这个问题最多可辩论） - 但是它比{{净改进了1}}
• 坚持opacity过渡，如果可能的话（基本上如果你不需要连锁店）
• 使用网络动画API

个人建议：永远不要指望同步.animate()动画，特别是当你有很多动画时。如果您更改选项卡或系统在一段时间内做了极其重要的资源，您的动画将会消失。如果你需要链，链。