众所周知，在 CSS 中只有两种动画可以廉价地实现：不透明度和变换。 任何其他动画都会有很高的几率导致动画/过渡出现卡顿。 幸运的是，这些属性可以实现大量的动画效果，特别是变换可以随意移动和调整元素的大小。
您甚至可以通过变换来模拟其他属性的动画效果。 在这篇 Google Chrome 开发者博客上的教程中，Paul Lewis 和 Stephen McGruer 解释了如何使用垂直缩放变换来模拟高度动画，同时向另一个方向触发垂直缩放变换，这样就不会出现任何压缩。
它很巧妙，性能好，而且很有用。 我已经将一个副本移到了 CodePen 上，您可以随意玩玩。
但是，为了获得这么简单的效果，代码确实有点多。 作为开发者，我更希望能够通过点击 切换一个类，然后菜单 动画过渡到自动尺寸，并且整个过程都能高效地完成。