line-height 能用于简单行高动画，但仅适用于单行文本且通过视觉模拟实现；真正高度动画推荐使用 max-height 或 JS 控制，以确保兼容性与效果稳定性。
表格行高动画在用户体验中常用于展开/收起行内容，比如详情展示或下拉菜单。虽然 line-height 可以结合 transition 实现简单的高度过渡效果，但需注意其局限性和正确用法。
line-height 能否用于高度动画？
line-height 控制的是文本行的行高，不是元素的整体高度。直接对 line-height 使用 transition 仅能平滑改变文字行间距，无法真正实现“整行高度”从0到展开的动画。但如果表格行内只有单行文本，且通过 line-height 控制容器视觉高度，可“模拟”出动画效果。
适用场景举例：
- 表格某行需要隐藏/显示文本，内容较少
- 不依赖精确高度控制，仅需视觉上的淡入缩放感
- 配合
overflow: hidden实现裁剪动画
CSS 实现方式
以下是一个利用 line-height + transition 实现表格行“展开”效果的示例：
.table-row {
line-height: 0;
height: 0;
overflow: hidden;
transition: line-height 0.3s ease, height 0.3s ease;
}
.table-row.expanded {
line-height: 2;
height: auto;
}| 详细信息内容会在这里出现 |
关键点说明：
-
line-height: 0让文本不可见，视觉上“隐藏”内容 -
height: 0配合overflow: hidden确保行不占空间 - 过渡生效是因为
line-height是可动画属性 -
height: auto不能被过渡，所以实际动画仍依赖line-height的变化来推动视觉变化
更推荐的替代方案
若需真正意义上的“高度动画”，建议使用其他方法：
-
max-height 过渡：设置一个足够大的
max-height替代height: auto - transform + opacity：用缩放和透明度模拟展开（性能更好）
- JavaScript 动画：通过获取元素真实高度动态设置 transition
例如使用 max-height：
.table-row {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.table-row.expanded {
max-height: 100px; /* 大于实际内容高度 */
}总结
line-height 结合 transition 可实现轻量级的表格行动画，适合简单场景。但由于它并非真正控制容器高度，复杂布局中容易失效。对于更稳定的高度动画，推荐使用 max-height 或 JS 配合 CSS 过渡的方式。
基本上就这些，根据实际需求选择合适方案即可。
