重排时的 CSS3 过渡

Question

以这个dom为例

<div id="container" style="transition: width 1s ease-in-out;">
  <div style="width: 400px; display: none;"></div>
  <div style="width: 200px;"></div> 
</div>

如果我交替隐藏哪个内部 div，是否可以触发 CSS3 转换(通过回流)？如果可能的话，我可以添加许多内部 div 并在它们之间平滑切换，而无需知道它们的大小。

Answer 1

我认为仅通过 CSS 是不可能的 - 过渡是不可继承的，因此它们必须应用于相关的嵌套元素，并且没有宽度就无法应用宽度过渡，例如嵌套的 div 需要它的 width 和 0 设置为在悬停或 JS 点击或某些事件时在它们之间转换

但是我认为我真的没有理解这个问题；

#container div {transition: width 1s ease-in-out;}

将其应用到所有子 div，然后您只需切换显示和宽度，但您是否正在考虑这样做？