検索バーをクリックすると検索バーがゆっくり表示されます

Question

クリックすると検索ボックスが表示されます。

ここにコードがあります。最初の行はアイコンです。 2行目は検索ボックスです。 3行目は、検索ボックスを終了するための「x」アイコンです。

document.getElementById('searchIcon').onclick = function() { 
 
    document.getElementById('search').style.display = 'block'; 
 
    document.getElementById('clear').style.display = 'block'; 
 
    document.getElementById('search').focus(); 
 
    document.getElementById('searchIcon').style.display = 'none'; 
 
} 
 
document.getElementById('clear').onclick = function() { 
 
    document.getElementById('searchIcon').style.display = 'block'; 
 
    document.getElementById('search').style.display = 'none'; 
 
    document.getElementById('clear').style.display = 'none'; 
 
}

#searchIcon { 
 
    font-size: 5em; 
 
} 
 

 
#search { 
 
    color: rgb(255, 255, 255); 
 
    background-color: rgb(101, 64, 160); 
 
    border: solid 3px rgb(247, 157, 210); 
 
    border-radius: 10px; 
 
    width: 75%; 
 
    margin-top: 20.8px; 
 
    margin-left: 12.5%; 
 
    font-size: 2.2em; 
 
    display: none; 
 
    outline: none; 
 
    cursor: text; 
 
} 
 

 
#clear { 
 
    text-align: right; 
 
    width: 5%; 
 
    margin-top: -1.5em; 
 
    margin-left: 82%; 
 
    display: none; 
 
} 
 

 
#clear:hover { 
 
    cursor: pointer; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> 
 
<i id="searchIcon" class="material-icons accent">search</i> 
 
<input type="text" id="search"> 
 
<i id="clear" class="material-icons">clear</i>

JavaScriptが検索アイコンが消えつつあると検索ボックスが自分のCSSの表示を変更することで表示されます見ることができるようになっています。これは正常に動作しますが、検索ボックスはかなり早く表示されます。私はそれがゆっくりと起きることが可能かどうかを知りたい。おそらく、検索ボックスのサイズを小さくしてゆっくりと大きくしたり、ゆっくりとフェードしたりすることによって可能性があります。私はまだこれのすべてで新しいので、可能な場合は、たとえ彼らが最も効率的ではないとしても、回答を簡単に保つことができます。もし彼らがまたバニラのjavascriptであれば、それは私が学ばそうとしているものなので、非常に高く評価されます。ご協力ありがとうございました！

Answer 1

値を持たないdisplay:noneとdisplay:blockの代わりに、最初の値から最後の値になるまでに時間がかかるプロパティを使用する必要があります。不透明度を例に取ってみましょう：不透明度は0から1までの範囲であり、0.5は有効です。これは完全になります。

私たちの生活を楽にするためにCSSトランジションを使用します。これは、選択されたプロパティをどのような遅延で遷移させるかをブラウザに指示します。

document.getElementById('searchIcon').onclick = function() { 
 
    document.getElementById('search').style.opacity = 1; 
 
    document.getElementById('clear').style.opacity = 1; 
 
    document.getElementById('search').focus(); 
 
    document.getElementById('searchIcon').style.opacity = 0; 
 
} 
 
document.getElementById('clear').onclick = function() { 
 
    document.getElementById('searchIcon').style.display = 1; 
 
    document.getElementById('search').style.display = 0; 
 
    document.getElementById('clear').style.display = 0; 
 
}

#searchIcon,#search,#clear{ 
 
    transition-property:opacity; 
 
    transition-duration:1s; 
 
} 
 

 
#searchIcon { 
 
    margin-top: 3.5em; 
 
    font-size: 5em; 
 
} 
 

 
#search { 
 
    color: rgb(255, 255, 255); 
 
    background-color: rgb(101, 64, 160); 
 
    border: solid 3px rgb(247, 157, 210); 
 
    border-radius: 10px; 
 
    width: 75%; 
 
    margin-top: 8.5em; 
 
    margin-left: 12.5%; 
 
    font-size: 2.2em; 
 
    opacity: 0; 
 
    outline: none; 
 
    cursor: text; 
 
} 
 

 
#clear { 
 
    text-align: right; 
 
    width: 5%; 
 
    margin-top: -1.5em; 
 
    margin-left: 82%; 
 
    opacity: 0; 
 
    display:block; 
 
} 
 

 
#clear:hover { 
 
    cursor: pointer; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> 
 
<i id="searchIcon" class="material-icons accent">search</i> 
 
<input type="text" id="search"> 
 
<i id="clear" class="material-icons">clear</i>

CSS3 transitionsについてもっと読む、あなたは何だけではなく、不透明度をアニメーション化することができます。あなたは、位置やマージンを使って入力を下から来らせることができます。あなたは、幅：0から全幅まで、そのサイズで遊ぶことができます。想像力は限界です。

「目に見える」ようなクラスや好きなものを使用し、要素のスタイルで直接再生するのではなく、要素から追加/削除することをお勧めします。これは、後で変更する方がずっと簡単で、複数のプロパティで簡単に再生できるという利点があります。

Answer 2

構造を変更してCSSを希望の出力に到達させました。これがあなたを助けることを願っています。

document.getElementById('searchIcon').onclick = function() { 
 
    document.getElementById('search').classList.add("visible"); 
 
    document.getElementById('clear').classList.add("visible"); 
 
    document.getElementById('search').focus(); 
 
    document.getElementById('searchIcon').classList.add("hide"); 
 
} 
 
document.getElementById('clear').onclick = function() { 
 
    document.getElementById('searchIcon').classList.remove("hide"); 
 
    document.getElementById('search').classList.remove("visible"); 
 
    document.getElementById('clear').classList.remove("visible"); 
 
}

.search-wrap{ 
 
    position: relative; 
 
    width:75%; 
 
} 
 
#searchIcon { 
 
    font-size: 5em; 
 
    position: absolute; 
 
    top: 0px; 
 
} 
 
#searchIcon.hide{ 
 
    display:none; 
 
} 
 
#search { 
 
    color: rgb(255, 255, 255); 
 
    background-color: rgb(101, 64, 160); 
 
    border: solid 3px rgb(247, 157, 210); 
 
    border-radius: 10px; 
 
    width: 0%; 
 
    font-size: 2.2em; 
 
    display: inline-block; 
 
    margin-top: 0.25em; 
 
    margin-left: 12.5%; 
 
    outline: none; 
 
    cursor: text; 
 
    visibility: hidden; 
 
    transition: 0.8s; 
 
} 
 
#search.visible{ 
 
    width:85%; 
 
    visibility: visible; 
 
} 
 
#clear { 
 
    width: 5%; 
 
    display: inline-block; 
 
    position: absolute; 
 
    right: 20px; 
 
    top: 22px; 
 
    opacity:0; 
 
    transition:1.8s; 
 
} 
 
#clear.visible{ 
 
    opacity:1; 
 
} 
 
#clear:hover { 
 
    cursor: pointer; 
 
}

<div class="search-wrap"> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> 
 
<i id="searchIcon" class="material-icons accent">search</i> 
 
<input type="text" id="search"> 
 
<i id="clear" class="material-icons">clear</i> 
 
</div>

また、このFiddle Example