Öğelerin hareket etmesini sağlayın

Question

Arama kutumun tüm hareketini canlandırmaya çalışıyorum. Şimdiye kadar opaklık ve genişlik canlandırıyor, ancak genişlik 0'a ayarlandığında ve animasyon tamamlandığında, arama kutusunun daraldığı alan, hiçbir animasyon olmadan gerçekleşir. Bunun yerine istediğim, genişliğin diğer elemanların dinamik olarak konumlanmasını etkilemesidir.

Non Dynamic Resizing

Benim javascript apppends arama kutusuna

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

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

orada arama simgesi ve ev simgesi arasında olmamalıdır boşluk, olmanın başka bir sorun da var için .Show. Arama kutusundan dolayı eminim. Bunun yerine kullanmak sabit genişliğe width: 100% kullanmanın

<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: 200px; 

Düzenleme: veya vw birimi olarak-de kullanabilirsiniz @nine tarafından belirtildiği gibi!

Örnek:

$(".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.: boşluk büyük ihtimalle ... bir ebeveyn dolgu kaynaklanır)