單擊搜索圖標後，緩慢顯示搜索欄

Question

因此，我有一個搜索窗口圖標，單擊此按鈕後會顯示搜索框。

這是代碼。第一行是圖標。第二行是搜索框。第三行是一個用於退出搜索框的「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