网页折叠面板需用 max-height 替代 height 实现平滑过渡，配合 opacity 和 visibility 联动控制，并设合理上限值、overflow: hidden 及精准 transition 属性。
网页折叠面板不能直接用 height + transition 实现平滑展开，因为 height: auto 不是可插值的数值类型，浏览器无法计算中间帧——结果就是“啪”一下弹出，毫无过渡感。真正稳定、零 JS 的方案是用 max-height 模拟高度变化，并配合其他关键属性协同控制。
用 max-height 替代 height 是核心前提
浏览器只支持对具体数值（如 0px、600px）做插值动画。max-height 可以设为固定上限值，从 0 过渡到该值，视觉上就等效于高度展开：
- 初始状态：
max-height: 0; overflow: hidden; - 展开状态：
max-height: 600px;（需明显大于内容实际高度） - 避免写
max-height: auto或max-height: 100%，它们在多数场景下不触发过渡
必须同步控制 visibility 和 opacity
单靠 max-height 会导致收起时边缘突兀消失，或点击穿透（看不见但能点中）。三者要联动生效：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
max-height：负责高度过渡（从0到上限值） -
opacity：从0到1，避免视觉闪跳 -
visibility：从hidden到visible，解决点击穿透问题；它本身不可动画，但必须和类切换瞬间同步
推荐写法：
.panel {<br> max-height: 0;<br> opacity: 0;<br> visibility: hidden;<br> overflow: hidden;<br> transition: max-height 0.3s ease, opacity 0.3s ease;<br>}<br>.panel.open {<br> max-height: 600px;<br> opacity: 1;<br> visibility: visible;<br>}上限值怎么设才安全又不卡顿
max-height 的目标值不是越大越好，而是“足够大但不过量”：
- 内容较固定（如 5 条菜单项）：用
max-height: 500px或30em - 响应式需求强：可用
max-height: calc(100vh - 80px)，比100vh更稳（避开 Safari 移动端地址栏抖动） - 绝对避免
max-height: none，它会彻底禁用过渡 - 若内容高度波动大（如含异步文本、图片加载），纯 CSS 就不够用了，得切回 JS 动态读取
scrollHeight
别漏掉这些细节才真正丝滑
很多动画看起来“差点意思”，往往败在细节：
- 不要写
transition: all 0.3s，它可能意外触发动画border、padding，造成布局抖动 - 如果面板有
padding或border，它们不会随max-height自动缩放，需显式加入 transition，例如：transition: max-height 0.3s, padding 0.3s, border 0.3s -
overflow: hidden不是可选项，是硬性前提——漏掉它，内容会在动画中溢出、遮挡其他元素 - 缓动函数建议用
cubic-bezier(0.25, 0.46, 0.45, 0.94)，比默认ease更柔和自然
