如何利用CSS3制作丝滑的折叠面板手风琴动画-css教程-PHP中文网

height: auto无法直接过渡，因浏览器无法插值计算其像素值，会导致跳变；应改用max-height模拟、transform: scaley()或js测量scrollheight后设固定height实现动画。

如何利用css3制作丝滑的折叠面板手风琴动画

折叠面板高度动画为什么不能直接用 `height: auto`

因为 CSS 动画无法从 height: 0 过渡到 height: auto——浏览器不知道 auto 对应的具体像素值，会跳变或完全不动画。常见错误是写 transition: height 0.3s ease 却发现展开时立刻弹出，收起时倒是动了，但展开没过渡。

解决思路只有两个：要么提前知道内容高度并写死（不灵活），要么用 JS 动态读取再设为内联 height（推荐）；或者绕过 height，改用 max-height 或 transform + overflow。

max-height 是最常用折中方案：设一个足够大的值（如 max-height: 500px），保证内容能完全展开，再配合 overflow: hidden 隐藏溢出
缺点是如果内容超过预设值，末尾会被截断；动画时间固定，长内容和短内容都走同样时长，感知上不够“贴合”
若内容高度差异大（比如有的面板只有一行，有的有十行），建议优先用 JS 测高 + height 动画

用 `max-height` 实现手风琴的最小可行代码

不需要 JS，适合静态内容或高度可控的场景。关键在初始状态、展开态的 max-height 值设定和 overflow 控制。

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

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

下载

details summary {
  list-style: none;
}
details[open] > summary ~ * {
  animation: slideDown 0.25s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; transform: scaleY(0.8); }
  to { opacity: 1; transform: scaleY(1); }
}
/* 更稳妥的做法：用 max-height 替代 transform */
.details-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}
.details-panel.open {
  max-height: 500px; /* 确保大于所有可能内容高度 */
  padding: 16px 0;
}

不要用 linear 缓动，cubic-bezier(0.4, 0, 0.2, 1)（即 ease-out 的变体）更接近自然加速/减速
padding 也要加进 transition，否则内边距突变会破坏丝滑感
如果内容含图片或字体加载延迟，max-height 可能算小了——此时必须换 JS 方案

JS 动态测高 + `height` 动画才是真丝滑

当面板内容动态生成、含异步加载元素，或需要精确匹配高度时，必须靠 JS 读取 scrollHeight 并设为内联 style.height。这是唯一能让不同长度内容拥有“各自节奏”的方式。

function togglePanel(panel) {
  const content = panel.querySelector('.panel-content');
  if (panel.classList.contains('open')) {
    panel.classList.remove('open');
    content.style.height = content.scrollHeight + 'px';
    // 强制重排，让浏览器读到当前 height
    void content.offsetHeight;
    content.style.height = '0';
  } else {
    content.style.height = '0';
    void content.offsetHeight; // 触发重排
    panel.classList.add('open');
    content.style.height = content.scrollHeight + 'px';
  }
}

必须两次 void offsetHeight：第一次清缓存，第二次确保样式已应用再读 scrollHeight
动画结束后记得清除内联 height（用 content.style.height = ''），否则后续 JS 测高会出错
如果面板里有 margin 或 border，scrollHeight 不包含它们，但 height 动画会受其影响——建议统一用 padding 控制间距