本文详解如何通过 css `transition` 与合理状态控制，为水平排列的可折叠容器实现流畅的展开/收起动画，解决 `flex-basis: auto` 和 `display: none/block` 无法过渡的核心问题。
在构建响应式、交互式布局时，常需实现类似“单选式展开面板”的效果：点击一个标题，该容器展开（占据更大宽度），其余自动收缩。但许多开发者会发现，直接对 max-width: auto 或 display: none → block 添加 transition 完全无效——这是因为 CSS 过渡（transition）不支持 auto 值和 display 属性的动画。
✅ 正确实现动画的关键原则
避免 auto 值参与过渡
flex-basis: auto 无法被浏览器插值计算。应改用具体数值（如 0% / 40%），并确保初始/目标状态均为可计算单位。禁用 display 动画，改用 opacity + width + overflow 组合控制可见性
display 是离散属性，不可过渡；而 opacity、width、max-height（配合 overflow: hidden）均可平滑过渡。-
统一使用 transition: all 或显式声明需过渡的属性
显式写法更可控（推荐）：.container { transition: flex-basis 0.3s ease, opacity 0.3s ease; } .opis { transition: width 0.3s ease, opacity 0.3s ease; } 父容器需限制溢出，防止滚动干扰动画观感
将 .row { overflow-x: hidden; } 替代 auto，避免内容伸缩时出现意外滚动条。
✅ 优化后的核心 CSS（精简实用版）
.row {
display: flex;
flex-wrap: nowrap;
overflow-x: hidden; /* 关键：隐藏横向溢出 */
height: 100%;
}
.container {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
/* 使用具体值替代 auto，支持 transition */
transition: flex-basis 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.container.expanded {
flex-basis: 40%; /* 展开态固定比例 */
}
.container.collapsed {
flex-basis: 0%; /* 收缩态设为 0%，非 auto */
}
/* 文案区域：用 width + opacity 替代 display 控制 */
.opis {
opacity: 0;
width: 0;
overflow: hidden;
background-color: #f0f0f0;
line-height: 1.5;
padding: 10px;
transition: width 0.4s ease, opacity 0.4s ease;
}
.container.expanded .opis {
opacity: 1;
width: 50%; /* 可根据需要调整实际宽度 */
}✅ JavaScript 逻辑保持简洁（无需修改 DOM 结构）
const containers = document.querySelectorAll('.container');
containers.forEach(container => {
const header = container.querySelector('.header');
header.addEventListener('click', () => {
// 先重置所有容器状态
containers.forEach(c => {
c.classList.remove('expanded', 'collapsed');
});
// 当前容器切换展开态，其余自动归零
container.classList.add('expanded');
});
});? 注意：原代码中 classList.toggle('collapsed') 易导致状态混乱，建议统一用 removeAll + add expanded 管理，语义更清晰、行为更确定。
✅ 进阶提示：提升用户体验
- 缓动函数优化：使用 cubic-bezier(0.34, 1.56, 0.64, 1) 替代默认 ease，让展开有轻微“弹性”感；
- 防连续点击抖动：可在 JS 中添加节流（throttle）或添加 pointer-events: none 临时禁用点击；
- 无障碍支持：为 .header 添加 role="button" 和 aria-expanded 属性，并动态更新其值；
- 移动端适配：在小屏下可改为垂直堆叠（flex-direction: column）+ 高度过渡，复用同一套动画逻辑。
通过以上改造，四个并排容器即可实现专业级的、丝滑连贯的展开/收起交互动画——无需 JavaScript 动画库，纯 CSS 驱动，性能优异且易于维护。
立即学习“前端免费学习笔记（深入）”；
