本文详解如何为横向排列的可折叠容器添加流畅的 CSS 动画效果，解决 flex-basis: auto 和 display: none/block 无法过渡的核心问题，并提供完整可运行的 HTML/CSS/JS 实现方案。
本文详解如何为横向排列的可折叠容器添加流畅的 css 动画效果，解决 `flex-basis: auto` 和 `display: none/block` 无法过渡的核心问题，并提供完整可运行的 html/css/js 实现方案。
在构建横向布局的交互式信息面板（如产品特性对比、步骤引导、多选项卡摘要等）时，常需实现「点击展开一个，其余自动收缩」的效果。但直接使用 flex-basis: auto 或切换 display 属性会导致动画失效——因为 CSS transition 不支持 auto 值和 display 的离散状态变化。本文将从原理到实践，系统性地解决这一常见难题。
✅ 关键修复原则
- 避免 auto 值参与过渡：flex-basis: auto 无法被动画化，应替换为具体数值（如 0% → 40%）；
- 禁用 display 动画：改用 opacity + width/max-height + overflow: hidden 组合控制显隐；
- 统一过渡属性：使用 transition: all 0.3s ease（推荐 300ms，兼顾感知流畅性与响应速度），而非仅 max-width 或 opacity；
- 约束父容器溢出：.row { overflow-x: hidden } 防止收缩时内容溢出造成滚动条抖动或布局错位。
? 完整可运行代码（优化版）
以下为精简、健壮、符合现代 CSS 最佳实践的实现（已移除冗余动画前缀与不必要 @keyframes）：
<div class="row">
<div class="container">
<div class="header"><h3 class="title">Title 1</h3></div>
<div class="content">
<div class="color color1"></div>
<div class="opis">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</div>
</div>
</div>
<!-- 其余 3 个 container 结构相同，略 -->
</div>.row {
display: flex;
flex-wrap: nowrap;
overflow-x: hidden; /* 关键：隐藏收缩过程中的临时溢出 */
height: 100vh;
margin: 0;
}
.container {
flex: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
transition: all 0.3s ease; /* ✅ 统一、轻量、高性能 */
overflow: hidden; /* 配合 width/opacity 过渡，防止内容外露 */
}
.header {
cursor: pointer;
padding: 12px 16px;
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
}
.content {
flex: 1;
display: flex;
flex-direction: row;
}
.color {
flex: 1;
min-height: 200px;
}
.color1 { background-color: #ff0000; }
.color2 { background-color: #00ff00; }
.color3 { background-color: #0000ff; }
.color4 { background-color: #ff00ff; }
.opis {
opacity: 0;
width: 0;
max-width: 50%;
padding: 12px 16px;
background-color: #f0f0f0;
line-height: 1.5;
overflow: hidden;
transition: all 0.3s ease; /* ✅ 同步控制 width + opacity */
}
/* 展开态：分配宽度 + 显示文字 */
.container.expanded {
flex-basis: 40%; /* ✅ 固定值，可过渡 */
}
.container.collapsed {
flex-basis: 0%; /* ✅ 0% 而非 auto */
}
.container.expanded .opis {
opacity: 1;
width: 50%; /* ✅ 精确控制，避免 layout shift */
}const containers = document.querySelectorAll('.container');
containers.forEach(container => {
const header = container.querySelector('.header');
header.addEventListener('click', () => {
// 收缩所有其他容器
containers.forEach(c => {
if (c !== container) {
c.classList.remove('expanded');
c.classList.add('collapsed');
}
});
// 切换当前容器状态
container.classList.toggle('expanded');
container.classList.toggle('collapsed');
});
});⚠️ 注意事项与进阶建议
- 性能优先：避免对 height 或 top 等触发重排（reflow）的属性做动画；flex-basis、width、opacity 属于 GPU 加速友好属性，更推荐；
- 无障碍增强：为 .header 添加 role="button" 与 aria-expanded 属性，并在 JS 中同步更新，提升屏幕阅读器体验；
- 移动端适配：可配合 @media (max-width: 768px) 将 .row 改为 flex-direction: column，实现响应式堆叠布局；
- 防重复点击：在事件处理中加入 container.classList.contains('expanding') 锁定状态，避免快速连点导致类名冲突；
- 渐进增强：若需支持旧版浏览器，可用 max-height: 0 → max-height: 300px 替代 width 方案（需预估内容最大高度）。
通过以上重构，四个容器间的展开/收缩将呈现自然、连贯、专业级的视觉反馈——不再是生硬的跳变，而是具备节奏感与空间逻辑的交互动效。这不仅是样式的优化，更是用户体验的关键细节。
