使用CSS动画在顶部移动搜索框

Question

当用户专注于搜索框时，我需要移动搜索框。我正在使用CSS动画，这是工作但不能正常工作。我想让目前的搜索框正在向上移动，但现在似乎新的搜索框正在取代当前的搜索框。

$('input').focus(function(){
$('.search').addClass('fixed');
})

$('input').blur(function(){
$('.search').removeClass('fixed');
})

body{
  margin:0
}
.banner{
  height:200px;
  background:#ff0000
}
.search{}
.search-bar{ height:50px; background:#666; padding-top:10px}
.search-bar input{width:100%; height:35px}
.animated{background:#fff; opacity:0; position:fixed; bottom:0; height:0px; transition:height 0.5s; width:100%}
.fixed .animated{ height:100%; opacity:1}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <div class="banner">
    
  </div>
  <div class="search">
    <div class="search-bar">
      <input type="text">
    </div>
    <div class="animated">
        <div class="search-bar">
      <input type="text">
    </div>
      
    </div>
  </div>
  <div class="body">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
    </p>
  </div>
</div>

Answer 1

以下是仅使用1个搜索框（输入）

进行相同动画的示例

$('input').focus(function(){
  $('.search').addClass('fixed');
})

$('input').blur(function(){
  $('.search').removeClass('fixed');
})

html, body {
  margin: 0
}
.banner {
  height: 200px;
  background: #ff0000
}
.search-bar {
  height: 50px;
  background: #666;
  padding-top: 10px
}
.search-bar input {
  width: 100%;
  height: 35px
}
.search {
  transition: bottom 0.5s, top 0.5s;
  background: #ddd;
  width: 100%;
  min-height: 50px;
  top: 200px;
  bottom: 40%;
}
.search.fixed {
  transition: bottom 0.5s, top 0.5s;
  top: 0;
  bottom: 0;
  position: fixed;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <div class="banner">

  </div>
  <div class="search">
    <div class="search-bar">
      <input type="text">
    </div>      
  </div>
  <div class="body">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
    </p>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
    </p>
  </div>
</div>