元素的动画运动

我正在试图为搜索框的整个运动设置动画。到目前为止，不透明度和宽度动画，但是一旦宽度设置为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>

来源

2016-04-03 nine

你有什么迄今所做？ –

空格最有可能来自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>

（P.S：空格最有可能由父母造成填充...）

来源

2016-04-03 20:18:16

虽然这回答了我的问题，但将其设置为设置的px宽度对于用户具有较小（或较大）浏览器时不利。更好的方法是使用视口宽度。其中的工作也很好，适用于所有大小的浏览器。 – nine

@nine伟大的发现！ –

元素的动画运动

回答

相关问题