元素更改宽度时的过渡宽度CSS

Question

今天我花了一整天的时间来弄清楚如何实现这一目标，但是却没有做到。

我想在搜索区域设置动画收缩动画，单击“选择”时，它会改变宽度。我希望这种过渡能够顺利进行。

我尝试在select上设置最小宽度，而不是过渡它。 我也在搜索是否可以设置柔韧性收缩动画，但是无法使其起作用。 我尝试在所有元素上进行宽度转换。

有人可以帮我吗？

let select = document.getElementById("select");
select.addEventListener("click", function() {
    select.style.width = '200px';
});

.container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  border: 2px solid black;
}

.logo,
.search,
.im-expanding {
  border: 2px solid red;
}

.logo {
  width: 125px;
}

.search {
  margin: 0 64px;
  width: 100%;
}

.im-expanding {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  width:auto;
  transition: width 2s ease-in;
}

<div class="container">
  <div class="logo">logo</div>
  <div class="search">
    <div class="search-box">
      <p>Search ...</p>
    </div>
  </div>
  <div class="im-expanding">
    <select id="select" name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <div>
      more stuff here
    </div>
  </div>
</div>

Answer 1

您需要为所选内容定义宽度（或最小宽度），并在其上添加过渡效果。

然后，你刚刚增加宽度当选择是上聚焦。

.container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  border: 2px solid black;
}

.logo,
.search,
.im-expanding {
  border: 2px solid red;
}

.logo {
  width: 125px;
}

.search {
  margin: 0 64px;
  width: 100%;
}

.im-expanding {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap; /* If you want to have your select label inline */
}

#select {
  width: 100px; /* OR min-width */
  transition: all 2s ease-in;
}

#select:focus {
  width: 200px; /* OR min-width */
}

<div class="container">
  <div class="logo">logo</div>
  <div class="search">
    <div class="search-box">
      <p>Search ...</p>
    </div>
  </div>
  <div class="im-expanding">
    <select id="select" name="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    <div>
      more stuff here
    </div>
  </div>
</div>

Answer 2

我不知道这是不是您想要的，但是您可以尝试使用它：

.search:hover {
     // You put your modification here
}

当您单击它时，它会根据您的需要进行更改。