Question

所以我有一个搜索玻璃图标，点击后会显示搜索框。

这是代码。第一行是图标。第二行是搜索框。第三行是＆＃39; x＆＃39;图标以退出搜索框。

＆＃13;

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';
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

因此，您可以看到javascript使搜索图标消失，并通过更改CSS显示来显示搜索框。这很好，但搜索框很快就出现了。我想知道是否有可能让它缓慢上升。可能通过让搜索框从小开始然后慢慢变大，或者可能慢慢消失。我仍然是新手，所以尽可能保持简单的答案，即使它们不是最有效的。如果他们也可能是非常感谢的香草javascript，因为这是我想要学习的东西。谢谢您的帮助！

Answer 1

我们应该使用一个可能需要更长时间才能从第一个值到最终值的属性，而不是使用没有值的display:none和display:block。我们以不透明度为例：不透明度范围从0到1,0.5有效，这使得它变得完美。

我们将使用CSS过渡来让我们的生活更轻松。这告诉浏览器转换所选属性，以及延迟。

＆＃13;

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;
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

阅读有关CSS3 transitions的更多信息，您可以动画任何内容，而不仅仅是不透明度。您可以使用定位或边距使输入来自底部。你可以玩它的大小，从宽度：0到全宽。想象力是极限。

在旁注中，您可能更喜欢使用类似＆＃34;可见＆＃34;或者你喜欢的任何东西，并从元素中添加/删除它，而不是直接使用元素＆＃39;样式。这将有利于以后更容易更改，并且更容易使用多个属性。

Answer 2

我更改了一些结构并CSS以达到所需的输出。希望这会对你有所帮助。

＆＃13;

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");
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

同时检查此Fiddle Example

单击搜索图标

2 个答案: