使用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;
}
<p>.element.open {
max-height: 500px; /<em> 设置一个合理上限 </em>/
}</p>

选择足够大的max-height确保内容完整显示，同时保持可过渡性。

立即学习“前端免费学习笔记（深入）”；

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

选用合适的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，用可计算的数值配合合理的缓动曲线，动画就会自然很多。