javascript - 元素的动画运动

Question

我正在尝试为搜索框的整个运动设置动画。到目前为止，不透明度和宽度都已动画化，但一旦将宽度设置为 0 并且动画完成，搜索框折叠的区域就会进行动画化，但不会有任何动画。相反，我想要的是宽度动态影响其他元素的位置。

Non Dynamic Resizing

我的 javascript 将 .show 附加到搜索框

input.search-box {
    opacity: 0;
    width: 0px;
    transition: 1s;
}

input.search-box.show {
    width: 100%;
    opacity: 1;
    transition: 1s;
}

还有另一个问题，即搜索图标和主页图标之间存在不应该存在的空白。我很确定这是因为搜索框。

<li>
  <a href="index.html"><i class="fa fa-home"></i></a>
</li>
<li class="search-box-list">
  <input id="search-box" type="text" class="search-box special" placeholder="Input STEAMID..." />
</li>
<li class="search-icon-list">
  <a href="#" class="fa fa-search search-icon"></a>
</li>

Answer 1

不要使用width: 100%，而是使用固定宽度:

width: 200px;

编辑:或者如@nine所述，您也可以使用vw单位!

示例:

$(".search-toggle").on("click", function(){
  $(".search-box").toggleClass("show");
});

ul{
  text-align: right;
}
ul li{
  display:inline-block;
  vertical-align:top;
}
input.search-box {
  position:relative;
  opacity: 0;
  width: 0px;
  transition: 1s;
}
input.search-box.show {
  width: 200px;
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li>
    <a href="#"><i class="fa fa-home"></i></a>
  </li>
  <li>
    <input class="search-box" type="search" placeholder="input STEAMID...">
  </li>
  <li>
    <a class="search-toggle" href="javascript:;"><i class="fa fa-search"></i></a>
  </li>
</ul>

(P.S:空白很可能是由父级填充引起的......)