如何在显示中转换项目大小变化：flex； justify-content: space-between; div

Question

我有一个 display: flex; justify-content: space-between; 容器 div，里面有 2 个孩子。第二个 child classes 将更改为包括（或不包括）class 和 display: none;。当逻辑应用这个 class 时它确实被隐藏了，并且第一个 child 的宽度增加以适应 parent div。问题是我无法将第一个 child 宽度更改为过渡，因此当第二个 child 隐藏或不隐藏时，第一个 child 会立即更改其宽度。我希望它的宽度增长到它的全宽，而不是突然变成它的全宽。

我正在使用 React，但它应该只有 css 才有可能，对吧？如果是这样，我该如何实现？

这是可重现的例子：

document.getElementById("toggle").addEventListener("click",function(e){
    document.getElementById("second").classList.toggle("hidden")
},false);

.container {
  display: flex;
  justify-content: space-between;

  background: #aaf;
  width: 200px;
  height: 40px;
  align-items: center;
}

.container > *:first-child {
  background: #afa;
  flex-grow: 1;
}

.container > *:last-child {
  display: flex;
  justify-content: space-between;

  background: #faa;
  width: 50px;
}

.container > *:last-child.hidden {
  display: none;
}

<div class="container">
  <div><span>1st</span></div>
  <div id="second" class="hidden">2nd</div>
</div>
<button id="toggle">toggle</button>

Answer 1

为了在宽度之间转换，您必须切换宽度值并使用 CSS 转换属性。您不能使用 hidden 转换宽度，因为这不是真就是假，没有中间值可以转换。

我对您的代码所做的更改：

添加溢出：隐藏在容器上
在宽度之间切换（而不是 'hidden' 属性）。这样可以过渡到工作。
将 transition: width 2s 添加到 children。

document.getElementById("toggle").addEventListener("click",function(e){
 
  const width = document.getElementById("second").style.width;

if (width === "" || width === "50px") {
  document.getElementById("second").style.width = "0px";
} else {
  document.getElementById("second").style.width = "50px";
}

},false);

.container {
  display: flex;
  justify-content: space-between;
  
  background: #aaf;
  width: 200px;
  height: 40px;
  align-items: center;
  overflow: hidden;
}

.container > *:first-child {  
  background: #afa;
  width: 100%;
  transition: width 2s;
}

.container > *:last-child {  
  background: #faa;
  width: 50px;
  transition: width 2s;
}

<div class="container">
  <div><span>1st</span></div>
  <div id="second">2nd</div>
</div>
<button id="toggle">toggle</button>

如何在显示中转换项目大小变化：flex； justify-content: space-between; div

How to transition item size change inside a display: flex; justify-content: space-between; div

html

css

css-transitions