html - 我将搜索框的宽度 pf 设置为 0。但它仍然显示它。可能是因为我正在使用 flex。但为什么？

Question

我想将我的搜索框宽度设置为 0。为什么它仍然显示搜索框的某些部分。但是，当我将它的高度设置为 0 时，它就会消失，但我没有得到我想要的动画。那么为什么宽度没有变成0呢？

#search-box {
  flex-grow: 0.7;
  border-radius: 50px;
  height: 50px;
  margin: 25px 60px 0px 50px;
  box-sizing: border-box;
  width: 0px;
  transition: all 0.8s ease;
  background-color: black;
}

#search-txt {
  position: relative;
  top: 13px;
  left: 15px;
  width: 0px;
  outline: none;
  background: white;
  border: none;
}

#search-btn {
  float: right;
  position: relative;
  bottom: 8px;
  left: 5px;
  height: 60px;
  width: 65px;
  background: green;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}

#search-box.active {
  width: 200px;
  border: 1px solid black;
}

<section>
  <h1> <span> @ </span>USMAN'S WEBSITE </h1>
  <ul>
    <a href="#">
      <li> <i class="fas fa-home"></i><br>HOME </li>
    </a>
    <a href="#">
      <li> <i class="far fa-newspaper"></i><br> ABOUT </li>
    </a>
    <a href="#">
      <li> <i class="fas fa-briefcase"></i> <br> WORK </li>
    </a>
    <a href="#">
      <li> <i class="fas fa-user-alt"></i> <br> TEAM </li>
    </a>
    <a href="#">
      <li> <i class="fas fa-phone"></i><br>CONTACT </li>
    </a>
  </ul>
  <div id="search-box">
    <input id="search-txt" type="text" placeholder="Search..">
    <button id="search-btn" type="submit"><i class="fas fa-search"></i></button>
  </div>
</section>

Answer 1

不是将 width 设置为 0，而是更改为 display:none;，如下所示。就可以了!

    #search-box{
    flex-grow:0.7;
    border-radius:50px;
    height:50px;
    margin:25px 60px 0px 50px;
    box-sizing: border-box;
    width:0px;
    transition:all 0.8s ease;
    background-color:black;
    }
    #search-txt{
        position:relative;
        top:13px;
        left:15px;
        display:none;
        outline:none;
        background:white;
        border:none;
        }
    #search-btn{
        float:right;
        position:relative;
        bottom:8px;
        left:5px;
        height:60px;
        width:65px;
        background: green;
        border-radius: 50%;
        outline:none;
        cursor:pointer;

    }
    #search-box.active{
        width:200px;
        border:1px solid black;
    }

<section>
    <h1> <span> @ </span>USMAN'S WEBSITE </h1>
    <ul>
    <a href="#"> <li> <i class="fas fa-home"></i><br>HOME </li> </a>
    <a href="#"> <li> <i class="far fa-newspaper"></i><br> ABOUT  </li> </a>
    <a href="#"> <li> <i class="fas fa-briefcase"></i> <br>  WORK </li></a>
    <a href="#"> <li> <i class="fas fa-user-alt"></i> <br>  TEAM </li></a>
    <a href="#"> <li> <i class="fas fa-phone"></i><br>CONTACT  </li></a>
    </ul>
    <div id="search-box">
    <input id="search-txt" type="text" placeholder="Search.."  >
    <button id="search-btn" type="submit"><i class="fas fa-search"></i></button>
    </div>

    </section>