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

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