如何創建此搜索框動畫？

Question

我目前正試圖複製一個網站進行練習，但由於搜索框我不知道如何創建而停下來。

現在，我知道如何創建一個正常的搜索框，使用表單和輸入法，但是這個特定的搜索框有一個輕微的動畫。 我會解釋。

Search Box

好了，一旦你點擊放大鏡搜索框纔會出現。一旦你這樣做，搜索框會從放大鏡的左側滑出。 如何隱藏搜索框並在點擊後只顯示它？我該如何讓它「滑出」？

Answer 1

我的解決辦法： 使用出現下面的JavaScript代碼：

var button = document.getElementById("search"); 
    var input = document.getElementById("search_input"); 
    document.body.removeChild(input); 
    var permission = true; 
    button.addEventListener("click", appear); 
    function appear() { 
     if (permission == true) { 
      if(document.getElementById("search_input") == null || window.getComputedStyle(document.getElementById("search_input")).getPropertyValue("opacity") == 0) { 
       input.setAttribute("class", "static"); 
       document.body.appendChild(input); 
      } else { 
       sliding(); 
      } 
     } 
    } 
    function sliding() { 
     permission = false; 
     input.setAttribute("class", "sliding"); 
     document.body.removeChild(input); 
     document.body.appendChild(input); 
     window.setTimeout(remove, 2900); 
    } 
    function remove() { 
     document.body.removeChild(input); 
     permission = true; 
    } 

你只需要添加「搜索」作爲按鈕標籤或在img標籤ID和「SEARCH_INPUT」作爲ID輸入標籤。而滑出你可以使用這個CSS動畫：

@keyframes slide { 
    from { left: 10%; opacity: 1;} 
    to { left: 90%; opacity: 0;} 
} 
@-webkit-keyframes slide { 
    from { left: 10%; opacity: 1;} 
    to { left: 90%; opacity: 0;} 
} 
#search_input { 
    position: absolute; 
    left: 10%; 
} 
.sliding { 
    animation-name: slide; 
    animation-duration: 3s; 
    -webkit-animation-name: slide; 
    -webkit-animation-duration: 3s; 
} 

Answer 2

這裏是一個簡單的jQuery解決方案。

$(document).ready(function() { 
 
    $('#trigger').click(function() { 
 
    $('#search-bar').toggleClass('search-bar-expanded'); 
 
    }); 
 
});

#search-bar { 
 
    width: 0; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    transition:width 1s; 
 
} 
 
.search-bar-expanded { 
 
    width: 200px!important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div id="search"> 
 
    <button><i class="fa fa-search" id="trigger"></i></button> 
 
    <div id="search-bar"> 
 
    <input type="text"/>   
 
    </div> 
 
</div>