基於max-height實現不定高度元素的折疊/合並,展開/收縮的動畫效果

基於實現元素的展開收縮，通常的想法是通過控制display的元素屬性和none之間的切換，雖然說功能可以實現，但是這種展開是沒有任何動畫的效果，只是單純的顯示與隱藏。例外一種方法就是通過JQuery的slideUp()、slideDown()方法，這是jQuery帶有的功能屬性，大家都應該很清楚，在有些情況下JavaScript框架都是沒有動畫模塊的，比如移動端，所以使用css實現動畫效果就成了最好的選擇。

 

下面我們將說一說max-height的二三事! 

 

1.先上css參考手冊關於max-height的說明 ：

 

2.使用css實現展開收縮的效果第一想法就是通過height+overflow:hidden實現，使用過這種方式的一般都知道在實現的過程都是將height的高度固定寫死，高度auto的話是無法形成過渡的動畫效果，auto是一個關鍵字值，並非數值，因此，height:100%的100%和auto兩者，height從0px到auto也是無法計算的。

 

3.實例

<style type="text/css">
.el{
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s;
    -webkit-transform: max-height 1s;
    background-color: #666;
}
:checked ~.el{
    max-height:800px; /*足夠內容的高度*/
}
#check ~label:before{
	content:"展開";
	display: inline-block;
}
:checked ~label:before{
	content:"收縮" !important;
}
</style>

資源網站大全 https://55wd.com 設計導航https://www.wode007.com/favorites/sjdh

html:

<input id="check" type="checkbox"><label for="check"></label>
<div class="el">
     <div class="box" style="width: 100%;">
     	這<br/><br/>是<br/><br/>內<br/><br/>容<br/><br/>哦<br/><br/>
     </div>
</div>

　　

這樣寫的max-height，給定足夠大的高度，就是言義上的任意高度，相對height來說比較靈活，兩者的區別就是計算高度的過程，一個是由人為計算，一個由盒子內容高度去計算知識這種寫法必須給定足夠存放內容的高，寫的時候盡量寫大一點。