line-height无法直接过渡，因其是CSS规范定义的离散型属性，无中间插值；可行方案包括用max-height模拟、transform:scaleY()缩放或JavaScript逐帧动画。
行高无法直接过渡：transition 对 line-height 失效的真相
直接给 line-height 加 transition 通常没效果，不是写法错，而是 CSS 规范里明确标注 line-height 是「离散型属性」——它没有线性中间值可插值。浏览器看到 transition: line-height 0.3s，实际会静默忽略，控制台也不报错，容易误以为是自己漏写了 will-change 或触发了重排。
可行方案：用 max-height 模拟行高过渡
这是最稳定、兼容性最好的替代路径。核心思路是：不改 line-height，而是控制容器高度变化，让内容在视觉上“撑开”或“收起”，配合 overflow: hidden 隐藏裁剪部分。
- 目标元素需有明确的
max-height初始值（如max-height: 1.5em）和展开值（如max-height: 10em），不能用max-height: none—— 它无法参与过渡 - 过渡必须作用于
max-height，而非height；height设为auto保持内容自适应 - 为避免文字突然跳变，建议同时过渡
opacity或加overflow: hidden防止内容溢出
div.text-box {
max-height: 1.5em;
height: auto;
overflow: hidden;
transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}
div.text-box.expanded {
max-height: 10em;
opacity: 1;
}
更精细控制：用 transform: scaleY() 配合 origin
如果只希望文本纵向拉伸/压缩（类似行高缩放），且能接受轻微字体渲染差异（尤其是小字号时 hinting 可能变化），transform: scaleY() 是更轻量的选择。它硬件加速、性能好，但要注意基点对齐。
- 默认缩放中心是元素中点，若想从顶部向下展开，需设
transform-origin: top -
scaleY(1)对应原始行高，scaleY(2)并非“两倍行高”，而是整体纵向拉伸两倍 —— 实际视觉效果接近，但段落间距也会同比放大 - 慎用于含内联元素（如
）或复杂排版的文本，缩放可能破坏 baseline 对齐
p.scalable-line {
transform: scaleY(1);
transform-origin: top;
transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
p.scalable-line.open {
transform: scaleY(1.8);
}
真正要改行高？只能靠 JS 动画帧逐帧计算
极少数场景（比如精确匹配某段富文本的行高动画），必须操作 line-height 数值本身。这时 CSS 过渡无解，得用 JavaScript 手动控制：
立即学习“前端免费学习笔记（深入）”；
- 先用
getComputedStyle(el).lineHeight获取当前值（注意单位可能是px或em） - 用
requestAnimationFrame逐帧更新style.lineHeight，确保平滑 - 务必做单位归一化：把
em转成px再插值，否则数值跳跃会导致卡顿
这种做法成本高、易出 bug，仅当设计稿强制要求“行高数字本身必须匀速变化”时才考虑。
