使用max-height替代height: auto并配合cubic-bezier缓动函数可解决CSS高度动画不流畅问题，避免浏览器无法计算过渡帧导致的卡顿，结合transform可进一步提升性能。
CSS高度变化动画不流畅，通常是因为transition默认的缓动函数不够自然，或者元素高度从auto或0切换时浏览器无法准确计算中间帧。使用transition结合合适的timing-function可以显著改善动画体验。
避免使用height: auto进行过渡
当height在0和auto之间切换时，浏览器无法预知目标高度，导致无法生成平滑的过渡帧，动画会直接跳变或卡顿。
解决方案：改用max-height模拟高度变化，或通过JavaScript动态设置具体高度值。
.element {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.element.open {
max-height: 500px; / 设置一个合理上限 /
}
选择足够大的max-height确保内容完整显示，同时保持可过渡性。
立即学习“前端免费学习笔记（深入）”；
选用合适的timing-function提升自然感
默认的ease可能在展开/收起时显得生硬。根据动画类型调整缓动函数，能让视觉更顺滑。
-
ease-out：适合“展开”动作，开始快，结束慢，给人稳定感 -
ease-in：适合“收起”，开始慢，避免突兀 -
cubic-bezier(0.4, 0, 0.2, 1)：自定义缓动，类似Material Design的流畅弹跳效果
.element {
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
结合transform辅助优化（进阶）
若仅需视觉上的“高度变化”，可考虑使用transform: scaleY()配合overflow: hidden，利用GPU加速提升性能。
注意：scaleY会压缩内部元素，文字可能模糊，适合简单容器。
.container {
overflow: hidden;
transition: transform 0.3s ease-out;
}
.content {
transform-origin: top;
}
基本上就这些方法，关键是避免height: auto，用可计算的数值配合合理的缓动曲线，动画就会自然很多。
