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

Andrea 发表于常见问题

安德里亚

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

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

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

有人可以帮我吗？

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>

空值

您需要为选择定义一个宽度（或最小宽度），并在其上添加一个过渡。

然后，仅在选择焦点时增加宽度。

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