兄弟按钮缩小和增长

Question

input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 25px;
  font-size: 16px;
  background-color: white;
  padding: 5px 0px 5px 10px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  right: 10px;
  position: fixed;
}

input[type=text]:focus {
  width: 96%;
}

.navbar {
    background: #fff;
    border: none;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:#6d7fcc;">
  <div class="container-fluid">
     <button type="button" id="sidebarCollapse" class="btn btn-info">
       <i class="fas fa-align-left"></i>
       <span>Table Of Contents</span>
     </button>
     <input type="text" name="search" placeholder="Search...">
  </div>
</nav>

有人可以帮帮我吗？如何通过转换（从右到左）缩小按钮，直到输入成为焦点时它消失。当焦点不在输入上时，随着过渡（从左到右）增长。谢谢。

Answer 1

因为我们需要过渡的区域不是很大，所以我建议在max-width 属性上添加transition。为了保持纯净CSS，我翻转了按钮的位置和搜索输入。我这样做的原因是我可以根据文本输入的:focus 触发transition。最后，我在button 周围添加了一个容器，并在该元素上转换max-width，并将其overflow 设置为隐藏。

input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 25px;
  font-size: 16px;
  background-color: white;
  padding: 5px 0px 5px 10px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
  right: 10px;
  position: fixed;
}

input[type=text]:focus {
  width: 96%;
}

.navbar {
  background: #fff;
  border: none;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-container {
  white-space: nowrap;
  overflow-x: hidden;
  transition: max-width 0.3s ease-in-out;
  max-width: 100%;
}

input[type=text]:focus + .btn-container {
  max-width: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:#6d7fcc;">
  <div class="container-fluid">
    <input type="text" name="search" placeholder="Search...">
    <div class="btn-container">
      <button type="button" id="sidebarCollapse" class="btn btn-info">
         <i class="fas fa-align-left"></i>
         <span>Table Of Contents</span>
       </button>
    </div>
  </div>
</nav>

jsFiddle

Answer 2

您使用的是 Bootstrap 4，因此您可以依靠 flexbox 属性来调整 html 结构，以便在输入 onfocus 时能够保持相同的视觉和控制按钮。你不需要输入position:fixed，因为容器已经固定了

这是一个例子：

input[type=text] {
  width: 130px;
  border: 2px solid #ccc;
  border-radius: 25px;
  padding: 5px 0px 5px 10px;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

input[type=text]:focus+.btn {
  width: 0;
  padding: 0;
  border-width:0;
}

.navbar {
  background-color:#6d7fcc;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar .btn {
  min-width: 0;
  width: 180px;
  transition: all 0.4s ease-in-out;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
  <div class="container-fluid flex-nowrap">
    <input type="text" name="search" class="order-1" placeholder="Search...">
    <button type="button" id="sidebarCollapse" class="btn btn-info text-nowrap overflow-hidden">
       <i class="fas fa-align-left"></i>
       <span>Table Of Contents</span>
     </button>
  </div>
</nav>