因此,我有一个搜索窗口图标,单击此按钮后会显示搜索框。单击搜索图标后,缓慢显示搜索栏
这是代码。第一行是图标。第二行是搜索框。第三行是一个用于退出搜索框的“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的,将不胜感激,因为这是我正在试图学习。感谢您的帮助!
https://jsfiddle.net/yrdh7afr/7/ –