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>