Question

我工作的一家小公司要求我尝试在我们的网站上修复搜索容器。其想法是，单击小搜索图标时，输入字段将从顶部淡入。现在的样子，它逐渐消失，然后立即消失（并在（短暂的一瞬间）显示的标题上留下了很大的间距。下面是HTML：

.search - container {
    position: fixed;
    z - index: 99;
    width: 100 % ;
    height: 150 px;
    background: #77ab42; /*# 9e ba90;*/
    padding - top: 40 px;
    display: none;
  }
  .search - container input {
    -moz - border - radius: 5 px; -
    webkit - border - radius: 5 px;
    border - radius: 5 px; -
    webkit - appearance: none;
    float: left;
    display: block;
    margin - right: 2.3576515979 % ;
    width: 74.4105871005 % ;
    float: none;
    font - size: 16 px;
    font - size: 1.6 rem;
    height: 60 px;
    margin: 0 px auto!important;
    display: block;
    padding - left: 30 px;
    color: #4b4b4b;
font-weight: 100; }
.search-container input:last-child {
  margin-right: 0; }

<div class="search-container">
  <div class="search-box">X</div>
  <form method="get" class="animated fadeInDown" id="searchform" action="https://validityscreening.com/">
    <input type="text" size="put_a_size_here" name="s" id="s" value="Search 
the site..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
  </form>
</div>

根据我在DevTools中观察到的情况，单击图标后，图标消失时，第一个div变为以下内容：

<div class="search-container" style="display: none;">

很抱歉，没有文字；感谢您的帮助！

Answer 1

您想产生这种效果吗？我不确定这是否是您想要的...看一下...单击X

function myFunction() {
  var x = document.getElementById("s");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.search container {
    position: fixed;
    z-index: 99;
    width: 100 % ;
    height: 150 px;
    background: #77ab42; /*# 9e ba90;*/
    padding - top: 40 px;
    display: none;
  }
  .search container input {
    -moz-border-radius: 5 px; -
    -webkit-border-radius: 5 px;
    border-radius: 5 px; -
    -webkit-appearance: none;
    float: left;
    display: block;
    margin - right: 2.3576515979 % ;
    width: 74.4105871005 % ;
    float: none;
    font - size: 16 px;
    font - size: 1.6 rem;
    height: 60 px;
    margin: 0 px auto!important;
    display: block;
    padding - left: 30 px;
    color: #4b4b4b;
font-weight: 100; }

.search-container input:last-child {
  margin-right: 0; }

<div class="search-container">
  <div class="search-box"  onclick="myFunction()">X</div>
  <form method="get" class="animated fadeInDown" id="searchform" action="https://validityscreening.com/">
    <input type="text" style="display:none;" size="put_a_size_here" name="s" id="s" value="Search 
the site..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
  </form>
</div>

Answer 2

夫妇笔记：

使用placeholder属性作为默认文本
size="put_a_size_here"无效

您在这里，希望这会有所帮助。我相信，这具有您要寻找的过渡效果；

document.querySelector('.search-box').onclick = () => {
  let form = document.querySelector('#searchform');
  if (form.classList.contains('fadeInDown')) {
    form.classList.remove('fadeInDown');
  } else {
    form.classList.add('fadeInDown');
  }
};

.search-container {
  position: fixed;
  z - index: 99;
  width: 100 %;
  height: 150 px;
  background: #77ab42;
  /*# 9e ba90;*/
  padding - top: 40 px;
  //display: none;
}

.search-container input {
  -moz - border - radius: 5 px;
  - webkit - border - radius: 5 px;
  border - radius: 5 px;
  - webkit - appearance: none;
  float: left;
  display: block;
  margin - right: 2.3576515979 %;
  width: 74.4105871005 %;
  float: none;
  font - size: 16 px;
  font - size: 1.6 rem;
  height: 60 px;
  margin: 0 px auto!important;
  display: block;
  padding - left: 30 px;
  color: #4b4b4b;
  font-weight: 100;
}

.search-container input:last-child {
  margin-right: 0;
}

.animated {
  height:0px;
  visibility: hidden;
  background-repeat: no-repeat;
  background-position: left top;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInDown {
  visibility: visible;
  height:auto;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

<div class="search-container">
  <div class="search-box">X</div>
  <form method="get" class="animated" id="searchform" action="https://validityscreening.com/">
    <input type="text" name="s" id="s" placeholder="Search the site...">
  </form>
</div>

搜索容器未显示

2 个答案: