缓入和缓出动画不适用于搜索栏答案

【问题标题】：ease-in & ease-out animation is not working for search bar缓入和缓出动画不适用于搜索栏
【发布时间】：2017-05-12 09:17:53
【问题描述】：

我制作了搜索按钮来显示和隐藏导航栏上的搜索栏，轻松进出，但动画不起作用，它不会在控制台中给我错误。整个html代码我就不写了，这是html的示例代码。

$('.search-icon a').on("click", function(){
    $('body').addClass('show-search').children('.search-box-outer').slideDown();
    return false;
});

$('.close-search').click(function(){
    $('.search-box-outer').removeClass('show-search').slideUp();
    return false;
});

.search-box-outer {
  position: fixed;
  width: 100%;
  height: 60px;
  float: left;
  background: #fff;
  z-index: 99999999;
  left: 0;
  top: -60px;
  transition: all 0.2s ease-in;
}

.search-box {
  width: 100%;
  position: relative;
  padding-right: 60px;
}

.search-box .form-control,
.search-box .form-control:focus {
  height: 82px;
  border: 0;
  border-bottom: 1px solid #ccc;
  box-shadow: none !important;
  font-size: 24px;
  border-radius: 0;
}

.close-search {
  background-color: #fff;
  color: #000;
  width: 60px;
  height: 82px;
  float: left;
  border-bottom: 1px solid #ccc;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
  line-height: 82px;
  text-align: center;
  transition: all 0.2s ease-out;
}

.show-search .search-box-outer {
  top: 0;
  position: relative;
  z-index: 99999;
  width: 100%;
}

.search-box-outer .container {
  padding: 40;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<header>
  <nav>
    <ul>
      <li>
        <a href="home">home</a>
      </li>
      <li>
        <a href="aboutus">aboutus</a>
      </li>
      <li>
        <a href="contactus">contactus</a>
      </li>
      <li class="search-icon">
        <a href="#!">
          <i class="fa fa-search"></i>
        </a>
      </li>
    </ul>
  </nav>
</header>
<div class="search-box-outer">
  <div class="search-box">
    <form>
      <input type="text" value="" class="form-control" placeholder="Type &amp; Hit Enter to Search" />
    </form>
    <a href="#!" class="close-search">
      <i class="fa fa-close"></i></a>
  </div>
</div>

【问题讨论】：

有什么问题？除了 css 问题（您的输入没有完全隐藏在顶部，并且您的关闭按钮超出窗口范围），它似乎正在工作。当我点击搜索时输入下降，当我点击关闭时输入上升。
@Ozan 轻松进出没有任何想法？？？
你可以像这样使用工具类 $('.search-icon a').click(function() { $('body').toggleClass('show-search'); }); .但是你仍然需要修复 css
我的 css 没有任何问题？？？
@AmrAshraf 似乎正在工作..你想要淡入淡出吗？

标签： jquery css css-animations

【解决方案1】：

我在 search-box-outer 类和 show-search search-box-outer 类中将位置更改为绝对位置，并添加了 display: none，它起作用了

jquery

$('.search-icon a').on("click", function(){
        $('body').addClass('show-search').children('.search-box-outer').slideDown();
        return false;
    });

    $('.close-search').click(function(){
        $('.search-box-outer').removeClass('show-search').slideUp();
        return false;
    });

css

.search-box-outer{
    position:absolute; 
    width:100%; 
    height:60px; 
    float:left; 
    background:#fff; 
    z-index:99999999; 
    left:0;
    top:-60px;
    display: none!important;
}


.show-search .search-box-outer{
    top:0;
    position: absolute!important;
    z-index: 99999;
    width: 100%;
}

【讨论】：