CSS trasition - スライドダウンとアップ

Question

私はdivを表示/非表示にしようとしていますが、CSSのトランジションを使用したかったので、開いたときと同じように、divをスライドエフェクトで上から下に表示します。クローズすると、下からスライドして隠れてしまうので、私はcss transitionを使ってこれを作成しようとしますが、うまくいきません。ここで

は、CSSアニメーション/遷移を使用するときは、ディスプレイのプロパティを使用することはできませんJSFiddle demo

$('.showdiv').click(function(){ 
 
     $(".morphing_search").show(); 
 
}); 
 

 
$('.close-btn').click(function(){ 
 
     $(".morphing_search").hide(); 
 
});

body { 
 
background: #fff; 
 
} 
 
.morphing_search { 
 
width: 100%; 
 
height: 500px; 
 
left: 0; 
 
top: 20px; 
 
background: #cdcdcd; 
 
display: none; 
 
transition-property: all; 
 
transition-duration: .1s; 
 
transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 
 
} 
 
.close-btn { 
 
position: absolute; 
 
right: 30px; 
 
top: 10px; 
 
background: #f00; 
 
color: #fff; 
 
padding: 5px 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<a class="showdiv" href="javascript:;">Open box</a> 
 
<div class="morphing_search"> this is the test div </div> 
 
<a class="close-btn" href="javascript:;">X</a>

Answer 1

です。

だから、私がしたことは、最大高をアニメーション化することです。

アクティブ状態では、私は値を誇張しました。 CSSを使用し

$('.showdiv').click(function(){ 
 
    $(".morphing_search").addClass('active'); 
 
}); 
 

 
$('.close-btn').click(function(){ 
 
    $(".morphing_search").removeClass('active'); 
 
});

.morphing_search { 
 
    width: 100%; 
 
    height: 500px; 
 
    left: 0; 
 
    top: 20px; 
 
    background: #cdcdcd; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition-property: all; 
 
    transition-duration: .7s; 
 
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 
 
} 
 

 
.morphing_search.active { 
 
    max-height: 500px; } 
 

 
.close-btn { 
 
    position: absolute; 
 
    right: 30px; 
 
    top: 10px; 
 
    background: #f00; 
 
    color: #fff; 
 
    padding: 5px 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a class="showdiv" href="javascript:;">Open box</a> 
 
<div class="morphing_search"> this is the test div </div> 
 
<a class="close-btn" href="javascript:;">X</a>

。クラスを追加したり削除したりする必要があります。

希望すると助かります！乾杯！