制作元素移动的动画

Animate movement of elements

本文关键字：动画 移动 元素      更新时间：2023-12-08

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

非动态调整大小

我的javascript apppends.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>

不使用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>

（附言：空格很可能是由父填充引起的…）

相关文章：