通过合理结合 flex-grow 控制、max-width 过渡及 overflow: hidden，可在不依赖 JavaScript 的前提下，让 Flex 子元素无延迟地缩放隐藏，同时其余子元素同步弹性填充空间。
通过合理结合 flex-grow 控制、max-width 过渡及 overflow: hidden，可在不依赖 javascript 的前提下，让 flex 子元素无延迟地缩放隐藏，同时其余子元素同步弹性填充空间。
在 Flex 布局中实现子元素“平滑收缩→隐藏”并带动兄弟元素“无缝伸展”的动画，关键在于避免过渡属性的无效计算（如初始 max-width: 100% 导致的视觉延迟），同时确保布局重排与视觉动画协同一致。
✅ 推荐方案：双阶段过渡控制
不依赖 transform: scale(0)（它脱离文档流，不释放空间），而是采用「弹性收缩 + 视觉裁剪」组合：
.child {
background-color: purple;
border: 3px solid silver;
box-sizing: border-box;
height: 100%;
flex-basis: 80px;
flex-grow: 1; /* 默认可伸展 */
max-width: 200px; /* 设为合理上限，避免 100% 引发重排延迟 */
overflow: hidden;
transition:
flex-grow 0.4s ease-in-out,
max-width 0.4s ease-in-out,
padding 0.4s ease-in-out,
margin 0.4s ease-in-out,
border-width 0.4s ease-in-out;
}
.flex_parent:hover #_1 {
flex-grow: 0; /* 立即放弃伸展权，让其他子项抢占空间 */
max-width: 0; /* 配合 overflow: hidden 实现“收起”效果 */
padding: 0;
margin: 0;
border-width: 0;
}
? 为什么比 transform: scale(0) 更优？
-
transform仅改变渲染层，不触发 Flex 布局重计算 → 兄弟元素无法感知空间释放； -
flex-grow: 0+max-width: 0是真实布局收缩，浏览器立即重新分配剩余空间，所有过渡同步启动，无首帧延迟。
⚠️ 注意事项：
- 必须显式设置
overflow: hidden，否则max-width: 0下内容可能溢出导致布局异常； -
flex-basis应保持固定值（如80px），避免与flex-grow冲突； - 若需支持多元素动态切换，建议为每个目标元素单独添加 hover/focus 类（或用 JS 切换
.collapsed类），而非硬编码#_1； - 过渡时间建议统一使用
ease-in-out，避免ease-in开头生硬或ease-out结尾拖沓。
✅ 进阶技巧：添加“淡出”增强体验
可叠加 opacity 和 visibility 提升完成感（注意 visibility 不参与过渡，需配合 opacity）：
.flex_parent:hover #_1 {
/* ...原有属性 */
opacity: 0;
}
/* 防止点击穿透 */
.flex_parent:hover #_1 {
pointer-events: none;
}
最终效果：点击/悬停时，目标子项匀速收缩至消失，其余子项同步平滑扩展填满空间——无卡顿、无延迟、纯 CSS 可控，完美契合现代响应式交互需求。
