javascript - 单击搜索图标后使搜索栏缓慢出现

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 显示来显示搜索框。这工作正常，但搜索框出现得相当快。我想知道是否可以让它慢慢出现。可能是让搜索框从小开始慢慢变大，或者慢慢淡入。我对这一切还很陌生，所以如果可能的话，让答案保持简单，即使它们不是最有效的。如果它们也可以使用 vanilla javascript，那将不胜感激，因为这正是我想要学习的。感谢您的帮助!

Answer 1

与其使用之间没有值的 display:none 和 display:block，我们应该使用一个从第一个值到结束可能需要更多时间的属性值(value)。让我们以不透明度为例:不透明度的范围可以从 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 的信息，你可以为任何东西设置动画，而不仅仅是不透明度。您可以使用定位或边距使您的输入来自底部。您可以调整它的大小，从 width:0 到全宽。想象力是极限。

附带说明一下，您可能更喜欢使用“可见”类或任何您喜欢的类，并从元素中添加/删除它，而不是直接使用元素的样式。这样做的好处是以后更容易更改，并且更容易使用多个属性。