Css 为什么宽度变换是跳跃的

我在设置转换时遇到问题。基本上，一切看起来都正常，几乎正常工作，但我有“跳跃”效果：不是将宽度从100%平滑地更改为100px，而是跳跃100%->“最小内容”->100px

JSFiddle：

主要代码部分：

<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>

---

我添加了过渡：宽度1s属性位于#c1.active#d1、#c2.active#d2

var change=函数（选择器）{
$（.active”）.removeClass（'active'）；
$（选择器）.addClass（'active'）；
}
$（'#d1'）。单击（函数（）{
变化（“#c1”）；
});
$（'#d2'）。单击（函数（）{
更改（“#c2”）
});
#d1{
背景颜色：绿色；
宽度：100px；
}
#d2{
背景色：红色；
宽度：100px；
}
.主动{
宽度：100%；
}
#c1，#c2{
显示：内联flex；
}
#c1.主动的#d1，#c2.主动的#d2{
宽度：100%；
过渡：宽度1s；
}

1.
d1
1.
d2
您好，请尝试此操作，因为100%宽度将导致过渡出现问题

    .active, .active #d1, .active #d2 {
      width: calc(400px - 100px);
    }

我的假设是，您的跳转是由flex-box的
flex-grow
行为引起的。为了避免这种情况，可以尝试设置
flex grow
和
flex shrink
属性的动画。可在Chrome中使用，未在其他浏览器中测试

您可以通过更改类
容器的
宽度
来更改伪最小宽度，例如

.container{
  display: inline-flex;
  width: 125px;
  flex-shrink: 100;
  flex-grow: 1;
  transition: flex-grow 1s cubic-bezier(0.4, 0, 0.2, 1), flex-shrink 1s cubic-bezier(0.4, 0, 0.2, 1);
}


函数切换类（）{
document.getElementById（'container-1'）.classList.toggle（'active'）；
document.getElementById（'container-2'）.classList.toggle（'active'）；
}
document.getElementById（'container-1'）。addEventListener（'click'，（）=>{
if（document.getElementById（'container-1'）.classList.contains（'active'））返回；
切换类（）；
});
document.getElementById（'container-2'）。addEventListener（'click'，（）=>{
if（document.getElementById（'container-2'）.classList.contains（'active'））返回；
切换类（）；
});
.wrapper{
显示：内联flex；
宽度：400px；
边框：1px点黑色；
框大小：边框框；
溢出：自动；
}
.wrapper.container:第n个子项（1）{
背景：浅蓝色；
}
.wrapper.container:第n个子项（2）{
背景：蓝色；
}
.wrapper.container:第n个子（1）div:最后一个子{
背景：rgba（255,0,0,0.33）；
光标：指针；
}
.wrapper.container:第n个子（2）div:最后一个子{
背景：rgba（0255,0,0.33）；
光标：指针；
}
.集装箱{
显示：内联flex；
宽度：100%；
弹性收缩：100；
柔性生长：1；
过渡：flex grow 1s立方贝塞尔（0.4,0,0.2,1），flex shrink 1s立方贝塞尔（0.4,0,0.2,1）；
}
.container.active{
弹性增长：100；
弹性收缩：1；
}
.元素{
宽度：100%；
}

1.
内容#1
1.
内容#2
不幸的是，在我的项目中，我不能有像400px这样的固定值。这个解决方案还有另一个问题：#d1，#d2不应该有400px-100px，因为文本的长度也在400px之内。你需要这两个
div
吗？它只包含
1
和
2
作为前缀？@michaelT，是的。在本例中，它们几乎不包含任何内容，但在实际情况中，它们的内容应保持可见。活动元素正在平滑扩展，但非活动元素正在更改，无需转换。谢谢。我仍然不明白为什么宽度有问题，但这确实很有帮助。
.container{
  display: inline-flex;
  width: 125px;
  flex-shrink: 100;
  flex-grow: 1;
  transition: flex-grow 1s cubic-bezier(0.4, 0, 0.2, 1), flex-shrink 1s cubic-bezier(0.4, 0, 0.2, 1);
}