この検索ボックスのアニメーションを作成するにはどうすればよいですか？

Question

私は現在、練習用のウェブサイトを複製しようとしていますが、作成方法がわからない検索ボックスのために停止してしまいました。

ここでは、フォームと入力方法で通常の検索ボックスを作成する方法を知っていますが、この特定の検索ボックスにはわずかなアニメーションしかありません。 私は説明します。

Search Box

[OK]を

ので、あなたは虫眼鏡をクリックすると、検索ボックスにのみ表示されます。これを行うと、検索ボックスが虫めがねの左側から滑り出します。 検索ボックスを非表示にし、クリックした後でしか表示されないようにするにはどうすればよいですか？そして、どうやって「スライドアウト」させるのですか？

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; 
    } 

あなたが唯一のidとしてbuttonタグやimgタグと「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>