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);
}