如何为可展开文件夹容器添加平滑的 CSS 动画过渡效果_技术教程

本文详解如何通过 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');
  });
});