CSS过渡与行高变化怎么实现平滑效果

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《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);
}