个人中心
gpt4 book ai didi

javascript - "display: none"流畅的动画

转载 作者：行者123 更新时间：2023-11-30 11:21:59 29 4
gpt4 key购买 nike

在 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 的解决方案将不起作用，因为您仍然可以单击不是我想要的输入

最佳答案

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

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

关于javascript - "display: none"流畅的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49496861/

29 4 0
文章推荐： javascript - 即使对象为空/未定义，ES6 访问对象属性也不会出错
文章推荐： javascript - 使用 jQuery 更新按钮上的数据属性
文章推荐： javascript - 使用 nyc 运行 mocha 时指定 mocha.opts 的位置？
文章推荐： javascript - Polymer 2 条件属性
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com