元素的動畫運動

我正在試圖爲搜索框的整個運動設置動畫。到目前爲止，不透明度和寬度動畫，但是一旦寬度設置爲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偉大的發現！ –

元素的動畫運動

回答

相關問題