如何实现Flex子元素平滑收缩/展开，且无延迟同步过渡？

问题描述 #

我需要制作一个Flex容器，其中子元素能以动画方式收缩和展开，同时剩余子元素自动填充腾出的空间。目前尝试的方法是将max-width设为0px、边框宽度设为0px，但存在以下问题：

• 若初始max-width设为100%，过渡开始时会有明显延迟——因为从100%降至0px的大部分过程不可见
• 若初始max-width设为接近子元素实际尺寸的值，响应性更好，但切换收缩/展开其他子元素时仍会出现延迟

解决方案 #

核心思路是让子元素的初始max-width与实际可见宽度一致，精准控制过渡属性，同时通过flex-shrink确保收缩元素优先响应，实现无延迟的同步过渡效果。

修改后的代码

.flex_parent {
  background-color: red;
  display: flex;
  width: 600px;
  height: 200px;
  gap: 3px;
}

/* 收缩第一个子元素的hover效果 */
.flex_parent:hover #_1 {
  max-width: 0;
  border-width: 0;
  padding: 0;
  flex-shrink: 10; /* 提升收缩优先级，确保优先收缩 */
  overflow: hidden; /* 隐藏收缩时的内容 */
}

.child {
  background-color: purple;
  border: 3px solid silver;
  box-sizing: border-box;
  height: 100%;
  flex-basis: 80px;
  max-width: 80px; /* 与flex-basis一致，避免过渡延迟 */
  text-align: center;
  color: white;
  flex-grow: 1;
  flex-shrink: 1;
  /* 只针对需要变化的属性设置过渡，提升性能 */
  transition: max-width 0.6s ease-in-out, border-width 0.6s ease-in-out, padding 0.6s ease-in-out;
}

<div class="flex_parent">
  <div class="child" id="_1">test</div>
  <div class="child" id="_2">test</div>
  <div class="child" id="_3">test</div>
  <div class="child" id="_4">test</div>
</div>

关键改动说明

1. 统一max-width与flex-basis：将.child的max-width设为和flex-basis相同的80px，这样过渡时是从实际可见的宽度向0收缩，彻底消除延迟
2. 精准控制过渡属性：移除transition: all，只针对max-width、border-width、padding设置过渡，避免不必要的属性计算，提升动画流畅度
3. 设置收缩优先级：给要收缩的子元素添加flex-shrink: 10，让它比其他子元素（flex-shrink:1）优先收缩，确保剩余元素同步展开填充空间
4. 移除冲突属性：去掉transform: scale(0)，它会和尺寸过渡产生视觉冲突，导致动画不协调
5. 添加overflow: hidden：收缩时隐藏子元素内容，避免内容溢出破坏布局

扩展：支持点击切换收缩/展开 #

如果需要点击切换而不是hover效果，可以添加简单的JavaScript：

document.querySelectorAll('.child').forEach(child => {
  child.addEventListener('click', () => {
    // 切换收缩状态
    child.classList.toggle('collapsed');
    // 重置其他子元素的状态
    document.querySelectorAll('.child').forEach(other => {
      if (other !== child) {
        other.classList.remove('collapsed');
      }
    });
  });
});

对应的CSS新增：

.child.collapsed {
  max-width: 0;
  border-width: 0;
  padding: 0;
  flex-shrink: 10;
  overflow: hidden;
}

内容的提问来源于stack exchange，提问作者Adrian contreras Tb