如何为可展开文件夹容器添加平滑的 CSS 过渡动画

本文详解如何通过 css `transition` 和合理状态控制，为水平排列的可折叠容器组实现流畅的展开/收起动画，解决 `flex-basis: auto` 与 `display: none/block` 无法过渡的核心痛点。

在构建响应式信息展示界面时，常需设计一组并排的“可展开容器”（如仪表盘卡片、知识库分类栏），点击任一标题时，该容器展开显示详情，其余自动收缩——但若直接使用 flex-basis: auto 或切换 display 属性，动画将失效。根本原因在于：CSS transition 不支持 auto 值和 display 的离散变化。

✅ 正确实现思路

避免 auto → 使用确定数值
将 .collapsed 的 flex-basis 设为 0%（而非 auto），.expanded 设为 40%，确保 flex-basis 可被过渡。
避免 display: none ↔ block
改用 opacity: 0 + width: 0% + overflow: hidden 配合 transition: all 模拟隐藏/显示效果，保持动画连贯性。
统一过渡控制
对 .container 应用 transition: all 3s ease，覆盖 flex-basis、opacity、width 等关键属性；同时为 .opis 单独设置 transition: all 3s，确保文本区域宽度与透明度同步变化。
布局兜底优化
给 .row 添加 overflow-x: hidden，防止收缩时内容溢出造成滚动条闪烁；移除 animation: fadeIn（因其 forwards 行为与 transition 冲突），完全依赖 transition 实现更可控的渐变。

✅ 关键代码片段（精简版）

.row {
  overflow-x: hidden; /* 防止收缩抖动 */
}

.container {
  transition: all 3s ease; /* 同时过渡 flex-basis, opacity, width */
}

.container.collapsed { flex-basis: 0%; }
.container.expanded  { flex-basis: 40%; }

.opis {
  display: block;      /* 始终可见，靠 width/opacity 控制表现 */
  opacity: 0;
  width: 0%;
  max-width: 50%;
  transition: all 3s ease;
}

.container.expanded .opis {
  opacity: 1;
  width: 50%;
}

// 保持原有逻辑，仅需确保 class 切换正确
containers.forEach(container => {
  const header = container.querySelector('.header');
  header.addEventListener('click', () => {
    containers.forEach(c => {
      if (c !== container) {
        c.classList.replace('expanded', 'collapsed'); // 更安全的替换
      }
    });
    container.classList.toggle('expanded');
    container.classList.toggle('collapsed');
  });
});

⚠️ 注意事项

性能提示：transition: all 虽方便，但建议明确列出需过渡的属性（如 transition: flex-basis 3s, opacity 3s, width 3s）以提升渲染性能。
无障碍兼容：为 .header 添加 role="button" 和 aria-expanded 属性，并在 JS 中同步更新，保障屏幕阅读器可用性。
移动端适配：在小屏下可改用垂直堆叠布局（flex-direction: column），并调整 flex-basis 为 100%，保证体验一致性。