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

由于我们需要转换的区域并不大，因此我建议在transition属性上添加一个max-width。为了保持纯净CSS，我翻转了按钮和搜索输入的位置。我这样做的原因是，我可以根据文本输入的transition来触发:focus。最后，我在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结构，以便在输入焦点时保持相同的视觉效果并控制按钮。由于容器已经固定，因此您无需输入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>

同级按钮缩小并增长

2 个答案: