Question

在jsfiddle中你会找到一个标题使用搜索图标，按下时，将在标题下方显示搜索栏。但问题是它立即出现。我希望标题能够平滑地扩展，搜索栏也会淡入。我试过但是无法让它工作。
jsfiddle：https://jsfiddle.net/HussamAlhassan/zwg0drne/15/

这是代码：
html：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/brands.css" integrity="sha384-IiIL1/ODJBRTrDTFk/pW8j0DUI5/z9m1KYsTm/RjZTNV8RHLGZXkUDwgRRbbQ+Jh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css" integrity="sha384-v2Tw72dyUXeU3y4aM2Y0tBJQkGfplr39mxZqlTBDUZAb9BGoC40+rdFCG0m10lXk" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity="sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f+JpUOVdAiJ5P" crossorigin="anonymous">
</head>

<div style="position: fixed; width: 100%; box-shadow: 0px 1px grey; transition: .4s ease-in-out;" id="headershell">
  <div id="header">

    <div id="searchicondiv">
      <i class="fas fa-search searchicon"></i>
    </div>

    <div id="namediv">
      <h1 id="name">Header</h1>
    </div>

    <div id="logindiv">
      <a href="#">
        <h2 id="login">Login</h2>
      </a>
    </div>

  </div>

  <div id="hiddensearch" class="Hidden" style=" background-color: black;">
    <div style="width: 100%;">
      <input id="search" placeholder="Search..">
    </div>
  </div>

</div>

的CSS：

div#header {
  width: 100%;
  background-color: rgba(0, 0, 0, 1);
  display: flex;
  z-index: 1000000;
  -webkit-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
  transition: .3s ease-in-out;
}

div#header #name {
  color: white;
  font-family: orbitron;
  text-align: center;
  font-size: 1.5em;
  margin-left: 5%;
}

div#header #login {
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  text-align: center;
  font-size: 1em;
  transition: .2s ease-in-out;
  padding: 0px;
}

div#headershell .searchicon {
  color: white;
  margin: auto;
  margin-left: 50%;
  transition: .2s ease-in-out;
}

div#headershell .searchicon:hover,
#login:hover {
  cursor: pointer;
  opacity: 0.5;
}

div#namediv {
  float: left;
  width: 33.4%;
}

div#searchicondiv {
  width: 33.3%;
  margin: auto;
  transition: .2s ease-in-out;
}

div#logindiv {
  width: 33.3%;
  float: left;
  margin: auto;
}

div#hiddensearch {
  z-index: 100;
  transition: 0.4s ease-in-out;
  padding-bottom: 1em;
  height: inherit;
  background-color: rgba(0, 0, 0, 1);
  transition: .3s ease-in-out;
}

div#hiddensearch #search {
  padding: .4em;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  border-radius: 5px;
  margin-top: -5%;
  color: white;
  background-color: rgba(0, 0, 0, 1);
  border: 2px white solid;
  transition: 0.3s ease-in-out;
}

div#hiddensearch #search:focus {
  text-decoration: none;
  color: black;
  background-color: white;
  border: 2px black solid;
  outline-width: 0px;
}

.headernotHidden {
  -webkit-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
  transition: .3s ease-in-out;
}

.notHidden {
  -webkit-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
  transition: .3s ease-in-out;
  opacity: 1;
  display: flex;
}

.Hidden {
  display: none;
  transition: .3s ease-in-out;
}

JS：

$(document).ready(function() {

  // jQuery methods go here...

  $(".searchicon").click(function hidesearch() {
    if ($("#hiddensearch").hasClass("Hidden")) {
      $("#hiddensearch").removeClass("Hidden");
      $("#hiddensearch").addClass("notHidden");

      $(".searchicon").removeClass("fa-search");
      $(".searchicon").addClass("fa-times");

      $("#headershell").addClass("headershellHidden");

    } else {
      $("#hiddensearch").removeClass("notHidden");
      $("#hiddensearch").addClass("Hidden");

      $(".searchicon").removeClass("fa-times");
      $(".searchicon").addClass("fa-search");

      $("#headershell").removeClass("headershellHidden");
    }
  })


});

编辑：将不透明度设置为0的解决方案无法正常工作，因为您仍然可以点击我想要的输入

Answer 1

而不是display: none，在opacity: 0;的CSS上使用.Hidden

https://jsfiddle.net/k1yg95gk/2/

Answer 2

我可以看到你正在使用jQuery。而不是使用display：none;你可以使用jQuery .hide（）和.show（）。

你可以这样使用它：

$(selector).hide(speed, callback);

$(selector).show(speed, callback);

甚至更简单，使用.toggle（），如下所示：

$(selector).toggle(speed, callback);

所有文件都在这里：

For hide();

For show();

For toggle();

你只需按照自己的意愿处理速度。

修改

编辑JSFiddle： https://jsfiddle.net/zwg0drne/30/

如果你的动画不合适，你可以在这个CSS类中使用toggleClass();和你想要的动画（在显示器上，高度，宽度......任何你想要的，具有转换速度）

此处的文档： toggleClass() documentation

Answer 3

您可以使用下面列出的任何jQuery方法。

.slideUp()
.slideDown()
.fadeIn()
.fadeOut()
.slideToggle()

你走了。我在跟随小提琴时使用了slideToggle()方法。

https://jsfiddle.net/zwg0drne/27/

你过度工程并写了太多行来实现简单的事情。请注意，我也对CSS进行了更改。

编辑：更新小提琴链接以切换搜索图标以及关闭图标。

“display：none”流畅的动画

3 个答案: