在隱藏元素並顯示它們時添加細微動畫-CSS -JS

Question

我在項目中單擊按鈕時添加隱藏類並刪除隱藏類。非常簡單。但是，不是簡單地隱藏元素並顯示它們，而是有辦法讓它們快速展開和彙總？我不是一個偉大的前端傢伙YET，這裏是我的javascript：

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>

缺點：你必須與申報單的固定高度的工作，可能不是每次你需要瀏覽器的支持：compatibility

JS Solution：

$(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()