本文详解如何通过 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%，保证体验一致性。
通过以上调整，原本生硬的展开/折叠操作将变为丝滑的弹性动画——既符合现代 UI 动效规范，又无需引入 JavaScript 动画库，纯 CSS 即可达成专业级交互动效。
