Animierte Bewegung von Elementen

Question

Ich versuche, die gesamte Bewegung meiner Suchbox zu animieren. Bis jetzt werden die Deckkraft und die Breite animiert, aber sobald die Breite auf 0 gesetzt ist und die Animation abgeschlossen ist, wird der Bereich, in dem das Suchfeld kollabiert, ohne Animation ausgeführt. Stattdessen möchte ich, dass die Breite die Positionierung anderer Elemente dynamisch beeinflusst.

Non Dynamic Resizing

Mein Javascript apppends .show das Suchfeld

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

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

Es gibt auch ein anderes Problem von dort Leerzeichen zu sein, wo es sollte nicht zwischen dem Suchsymbol und dem Home-Symbol sein. Ich bin ziemlich sicher, dass es wegen der Suchbox ist.

<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

Statt width: 100% der Verwendung verwenden, um eine feste Breite:

width: 200px; 

Edit: oder wie bereits von @nine Sie vw Einheit als-auch nutzen können!

Beispiel:

$(".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: der leere Raum ist höchstwahrscheinlich von einem Elternteil Polsterung verursacht ...)