如何实现平滑展开与收起的 HTML/CSS/JS 可折叠动画组件

⚠️ 注意：all 0.3s 虽简洁，但可能触发非预期属性动画；推荐显式声明 max-height 和 opacity，提升性能与可控性。

2. CSS 样式修正（禁用 display，启用渐变可见性）

.content {
  opacity: 0;
  max-height: 0;
  overflow: hidden; /* 必须！防止内容溢出破坏动画 */
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}
.content.show {
  opacity: 1;
  max-height: 500px; /* 设定合理上限值（如 content.scrollHeight + 20） */
}

? 关键：overflow: hidden 是 max-height 动画生效的前提；max-height 必须从 0 → 具体像素值（不能是 none 或 auto），否则过渡无效。

3. JavaScript 逻辑重构（精准控制状态）

原代码中 content.style.opacity == '100' 判断错误——CSS opacity 值范围是 0–1（小数），而非 0–100。同时需确保首次展开时能正确读取真实高度：

墨狐AI

5分钟生成万字小说，人人都是小说家！

下载

立即学习“前端免费学习笔记（深入）”；

function arrow_click() {
  const isExpanded = content.classList.contains('show');

  if (isExpanded) {
    // 收起：先设 opacity→0，再 max-height→0（利用 transition 顺序）
    content.style.opacity = '0';
    content.style.maxHeight = '0px';
    content.classList.remove('show');
  } else {
    // 展开：先设 max-height 为实际高度，再设 opacity→1
    content.style.maxHeight = content.scrollHeight + 'px';
    // 强制重排，确保 height 计算生效（关键！）
    void content.offsetHeight;
    content.style.opacity = '1';
    content.classList.add('show');
  }

  // 箭头图标切换
  arrow_icon.className = arrow_icon.className.includes('fa-angle-down')
    ? 'fa fa-angle-up'
    : 'fa fa-angle-down';
}

? 技巧：void element.offsetHeight 触发浏览器强制重排（reflow），确保 scrollHeight 在设置 maxHeight 前已被准确读取，避免“闪动”或动画跳变。

? 完整可运行示例（精简版）

  
  


  

    
What is lorem ipsum?
    

      
1, 2, 3
      

        Lorem ipsum dolor sit amet... 
      
    
    

      
    
  

  

✅ 总结：常见错误与避坑指南

• ❌ 错误：用 display: none/block 实现动画 → 无法过渡
• ❌ 错误：opacity 比较写成 '100' → 应为 '1' 或 '0'（CSS 规范值）
• ❌ 错误：未设 overflow: hidden → 内容溢出导致布局错乱
• ❌ 错误：未触发重排就设 maxHeight → 动画从 0 直接跳到最终高度
• ✅ 最佳实践：用 classList.toggle('show') 管理状态 + scrollHeight 动态计算 + 显式 transition 属性

掌握这套模式后，你不仅能修复当前问题，还可轻松扩展为多级折叠、手风琴菜单或响应式侧边栏动画。