怎么用CSS3过渡效果制作一个折叠风琴菜单？-css教程-PHP中文网

transition不能直接用于height:0↔height:auto，因浏览器无法计算auto值导致动画失效；推荐用max-height替代，设足够大的固定值并配合overflow:hidden实现平滑过渡。

怎么用css3过渡效果制作一个折叠风琴菜单？

transition 为什么不能直接用在 height: 0 ↔ height: auto 上

直接对 height 从 0 切换到 auto 不会触发动画，因为浏览器无法计算 auto 的具体数值，transition 失效。这是风琴菜单最常卡住的地方。

解决思路是避开 height: auto，改用可被插值的值：要么预设固定高度，要么用 max-height 模拟（推荐），或者改用 transform: scaleY() + overflow: hidden。

max-height 法最实用：设一个足够大的上限值（如 max-height: 500px），再过渡 max-height；展开时内容若超限会截断，所以得确保这个值大于所有子项最大高度
用 transform: scaleY() 性能更好，但需额外处理子元素内边距、滚动等细节
不要给父容器设 overflow: hidden 后又期望子元素出现滚动条——它会被裁掉

用 max-height + transition 实现可折叠面板

核心是把每个面板的 max-height 从 0 过渡到一个安全上限值，并配合 overflow: hidden 隐藏溢出内容。

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

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

下载

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}
.accordion-panel.is-open {
  max-height: 500px; /* 必须是具体数值，不能是 auto */
  padding: 1rem 0;
}

记得同时过渡 padding 或 opacity，否则展开时顶部/底部留白突兀
ease-in-out 比 linear 更自然；时间建议 0.25–0.35s，太长拖沓，太短像闪现
JavaScript 控制时，先加 is-open 类，再强制重排（offsetHeight）以触发过渡，否则可能跳过动画

JavaScript 如何正确触发折叠/展开

单纯切换 class 可能不触发过渡，尤其在 DOM 刚插入或初始隐藏状态下。关键是要让浏览器“看到”前后两个状态。

展开前先设 max-height: 0，再用 offsetHeight 强制重排：panel.offsetHeight;，再加 is-open 类
收起时可直接移除类，但若想更稳，先设 max-height 为当前实际高度（getComputedStyle(panel).height），再设回 0
避免用 display: none 控制显隐——它会让 transition 完全失效；始终用 max-height + overflow
多个面板互斥？监听点击后遍历其他面板，移除 is-open 类即可，无需额外计时器