Question

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

我的javascript apppends。显示到搜索框

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：空格很可能是由父填充引起的......）

元素的动画运动

1 个答案: