css 过渡与行高变化_通过 transition 实现行高的平滑过渡

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，仅当设计稿强制要求“行高数字本身必须匀速变化”时才考虑。