用max-height替代height可实现平滑过渡，因height:auto不可插值；需设足够大固定值（如500px）并配合overflow:hidden，值过小会截断、过大则拖沓；内容高度差异大时应js读取scrollheight动态设置。

用 max-height 实现过渡时为什么高度变化不生效

直接对 height 设置 transition 无效，因为从 0 到 auto 无法计算中间值。主流解法是改用 max-height，并设一个足够大的固定值（如 500px），让浏览器能插值动画。

• 值不能太小，否则内容被截断；也不能过大，否则展开慢、有明显延迟
• 建议根据内容最大可能行数估算，比如 10 行文本 ≈ 240px，再加 20% 余量
• 若内容高度差异极大（如含图片或动态加载），需 JS 测量真实高度后设为 max-height

如何用 JS 动态设置 max-height 过渡起点和终点

点击展开前，先获取目标元素的 scrollHeight，再设为 max-height；收起时设回 0。关键在触发重排前完成样式变更，否则过渡会跳过。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 展开流程：el.style.maxHeight = '0' → el.offsetHeight（强制重排）→ el.style.maxHeight = el.scrollHeight + 'px'
• 收起流程：直接设 maxHeight = el.scrollHeight + 'px' → offsetHeight → maxHeight = '0'
• 过渡结束后记得清除内联 max-height，避免影响后续 JS 操作

function toggleAccordion(el) {
  const content = el.nextElementSibling;
  if (content.style.maxHeight) {
    content.style.maxHeight = '0';
  } else {
    content.style.maxHeight = content.scrollHeight + 'px';
  }
}

overflow: hidden 必须加在动画元素上

如果只靠 max-height 过渡但没设 overflow: hidden，内容会在动画过程中溢出容器，视觉上像“撕裂”。这个样式不是可选的，是过渡成立的前提。

• 必须写在目标内容元素上，不能只写在父容器
• 不要用 overflow: clip 替代，部分旧版 Safari 不支持
• 若内容含绝对定位子元素，它们可能突破 overflow: hidden 边界，需额外处理定位上下文

移动端点击区域小导致手风琴误触怎么办

纯靠 <button></button> 或 <div> 做触发器，在触摸设备上容易点不中、连点两次才响应。得兼顾语义、可访问性和触控体验。 <ul> <li>触发器至少设 <code>min-height: 44px（iOS 推荐最小触控尺寸）

用 <button type="button"></button> 而非 <div>，避免屏幕阅读器识别异常 <li>添加 <code>touch-action: manipulation 减少移动端 300ms 延迟

避免在触发器内嵌套其他可点击元素（如链接），否则事件冒泡易引发意外展开/收起

过渡效果是否自然，取决于 max-height 的取值精度和重排时机控制；而手风琴真正稳定，往往卡在那些没显式报错、但点击无反应或内容闪一下就消失的边界场景里。