HTML折叠过渡效果怎么写？手风琴特效制作-html教程-PHP中文网

最简手风琴应优先使用原生details+summary，现代浏览器原生支持开合、语义化强、无需js；需用css控制summary::marker和max-height过渡动画，多面板互斥须js监听toggle事件。

html折叠过渡效果怎么写？手风琴特效制作

用 `details` + `summary` 实现最简手风琴，无需 JS

现代浏览器原生支持折叠组件，details 元素自带开合状态和语义化，summary 是可点击标题。它默认无动画，但能通过 CSS 过渡补全视觉反馈。

关键点在于：不能直接对 details 本身设 height: 0 或 opacity —— 它的内部内容是“渲染但不可见”，不是 DOM 移除，所以得作用于子容器。

把要折叠的内容包在 <div class="details-content"> 里 <li>用 <code>:has(> summary[open])（需 Chrome 105+/Safari 15.4+）或 JS 切换类名来控制子容器样式
过渡必须加在 max-height 和 opacity 上，不能用 height（因为高度不确定）

`max-height` 过渡的取值怎么设才不卡顿

设成固定值（比如 max-height: 200px）最稳妥，但内容超长会截断；设成 max-height: 1000px 又会导致慢速展开（过渡时间拉满）。折中方案是预估最大行数，转为像素值。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

字体行高 1.5，字号 14px → 每行约 21px
最多 6 行内容 → max-height: 126px（留点余量设 140px）
过渡写成 max-height 0.3s ease-in-out, opacity 0.2s ease，避免 opacity 单独延迟造成闪烁
初始状态设 max-height: 0; overflow: hidden; opacity: 0

旧浏览器兼容时为什么 JS 切换类比内联样式更可靠

IE 和老版 Edge 不支持 :has()，也不能监听 toggle 事件（只有现代 details 支持）。用 JS 绑定 click 到 summary，再切换包裹层的 open 类是最稳路径。

不要用 element.style.height = 'auto' —— 会触发重排，且无法过渡
改用 getComputedStyle(el).height 读取展开后高度，再设为 max-height，接着移除内联样式靠 CSS 过渡回落
为避免多次点击冲突，检查当前是否已有 open 类再执行逻辑

summary.addEventListener('click', () => {
  const content = summary.nextElementSibling;
  const isOpen = content.classList.contains('open');
  if (isOpen) {
    content.style.maxHeight = '0';
    content.style.opacity = '0';
    content.classList.remove('open');
  } else {
    content.style.maxHeight = content.scrollHeight + 'px';
    content.style.opacity = '1';
    content.classList.add('open');
  }
});