单击搜索图标后，使搜索栏显示缓慢

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> 

另请查看此小提琴示例