如何实现CSS多行文字溢出展开收起动画_结合max-height与transition-css教程-PHP中文网

max-height: 0 → auto或none无法动画，因二者非数值不可插值；须用JS读scrollHeight设具体像素值，并按“设0→强制重排→赋真实高度”三步执行。

如何实现css多行文字溢出展开收起动画_结合max-height与transition

直接用 max-height 做展开收起过渡，90% 的情况会失效——不是代码写错了，是浏览器根本没法对 none 或 auto 插值动画。

为什么 `max-height: 0 → max-height: none` 没动画

CSS 过渡只接受可计算、可插值的数值型属性。none 和 auto 都不是数值，浏览器遇到就直接跳转，不走过渡流程。常见错误写法：

div { max-height: 0; transition: max-height 0.3s; }
div.expanded { max-height: none; }

这看起来合理，但展开时动画完全不会触发。

scrollHeight 是唯一能准确反映内容真实高度的 DOM 属性；offsetHeight 和 clientHeight 只返回当前渲染高度，不含溢出部分
哪怕你预估一个固定值（比如 max-height: 500px），只要内容实际高度超过它，末尾就会被裁掉
设得太小会截断，设得太大又导致收起时“塌缩过慢”，视觉上像卡顿

JS 动态设置 `max-height` 的关键三步

必须拆成「关闭过渡 → 强制重排 → 开启过渡并赋值」，否则浏览器会合并样式计算，跳过动画。典型顺序不能错：

收起时：先设 max-height 为当前 scrollHeight，再立刻读取 offsetHeight（强制重排），最后设 max-height: 0
展开时：先设 max-height: 0，再读 offsetHeight，再设 max-height: el.scrollHeight + 'px'
加 will-change: max-height 能让长列表中动画更稳，尤其在移动端避免闪烁

示例函数：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

function toggleExpand(el) {
  const isExpanded = el.classList.contains('expanded');
  if (isExpanded) {
    el.style.maxHeight = el.scrollHeight + 'px';
    el.offsetHeight; // 强制重排
    el.style.maxHeight = '0';
  } else {
    el.style.maxHeight = '0';
    el.offsetHeight;
    el.style.maxHeight = el.scrollHeight + 'px';
  }
  el.classList.toggle('expanded');
}