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

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之間沒有值的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過渡的更多信息，您可以動畫任何內容，而不僅僅是不透明度。 您可以使用定位或邊距使輸入來自底部。 你可以玩它的大小，從寬度：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> 

另請查看此小提琴示例