为何CSS宽度过渡（transition）出现跳变问题？

嘿，我来帮你搞定这个过渡跳变的问题！你看到的「100% → min-content → 100px」跳变，本质是父元素的宽度在状态切换时没有明确的过渡规则，导致子元素的过渡被父元素的突然收缩干扰了。

问题根源拆解 #

当你移除.active类时，#c1的宽度从100%变成了inline-flex元素的默认行为——自动收缩到内容的最小宽度（也就是min-content）。而子元素#d1的宽度是基于父元素的：

• 活跃状态下：#d1宽度是父元素100%宽度的100%（也就是容器的400px）
• 移除类的瞬间：父元素先收缩到内容最小宽度，#d1的宽度跟着瞬间变成这个最小宽度，然后才开始过渡到100px
  这两步叠加起来，就出现了你看到的跳变效果。

解决方案一：让父元素也参与过渡（推荐） #

我们需要给父元素设置明确的非活跃状态宽度，并且让它和子元素一起平滑过渡，这样整个过程就不会有断层：

<div style="display:inline-flex; width: 400px; border: 1px dotted black;">
  <div id="c1" class="active">
    <div> 1 </div>
    <div id="d1"> 1 </div>
  </div>
  <div id ="c2">
    <div> 1 </div>
    <div id="d2"> 1 </div>
  </div>
</div>

/* 给非活跃状态的父元素设置明确宽度，和子元素最终宽度一致 */
#c1, #c2 {
  width: 100px;
  transition: width 1s; /* 父元素也添加上过渡动画 */
}

#d1, #d2 {
  width: 100px;
  transition: width 1s;
}

/* 活跃状态下，父元素和子元素都占满宽度 */
.active, .active #d1, .active #d2 {
  width: 100%;
}

这样修改后，父元素和子元素会同步从100%过渡到100px，整个动画完全平滑，不会再出现跳变。

解决方案二：固定父元素宽度（如果业务场景允许） #

如果你的父元素不需要动态收缩，也可以直接固定它的宽度，让子元素在固定容器内过渡：

/* 强制父元素始终保持100%宽度 */
#c1, #c2 {
  width: 100%;
}

#d1, #d2 {
  width: 100px;
  transition: width 1s;
}

.active #d1, .active #d2 {
  width: 100%;
}

这种方案下，父元素宽度不会变化，子元素直接在400px的容器内从100%过渡到100px，自然不会有跳变问题。

内容的提问来源于stack exchange，提问作者kmandziuk