要素を隠して公開するときに微妙なアニメーションを追加する-CSS -JS

Question

私のプロジェクトでボタンがクリックされたときに隠れたクラスを追加し、隠しクラスを削除します。かなり簡単。しかし、単純に要素を隠して表示するのではなく、すぐにロールアウトしてロールアップする方法がありますか？私のJavascriptを私はここで、YET偉大なフロントエンドの男じゃないです

JS

$(document).on("click", _this.sel.close, function(event) { 
    $(".update-billing").addClass("hidden"); 
    $(".billing-stats").removeClass("hidden"); 
    $(".current-cc").removeClass("hidden"); 
    event.preventDefault(); 
}); 

アニメーションについて学ぶためのいくつかの良いリソースは何ですか？

Answer 1

CSSソリューション：

$(document).on("click", 'span', function(event) { 
 
    $(".slider").toggleClass("hidden"); 
 
    event.preventDefault(); 
 
});

.slider { 
 
    height: 200px; 
 
    max-height: 500px; 
 
    background-color: red; 
 
    transition-property: all; 
 
    transition-duration: .5s; 
 
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1); 
 
} 
 

 
.hidden { 
 
    overflow-y: hidden; 
 
    max-height: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slider"> 
 
    Content 
 
</div> 
 
<span>Click me</span>

マイナス面：あなたはdiv要素の固定の高さと仕事をしなければならないとあなたが必要とするすべてのブラウザでサポートされない可能性があります：compatibility

JSソリューション：

$(document).on("click", 'span', function(event) { 
 
    $(".slider").slideToggle(); 
 
    event.preventDefault(); 
 
});

.slider { 
 
    height: 200px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="slider"> 
 
    Content 
 
</div> 
 
<span>Click me</span>

リファレンス

css transitions

.slideToggle()