max-height實現任意高度元素的展開收縮動畫

xuxueli 發布于2019-04-23 13:41 / 1505人閱讀

摘要：前言在說到實現元素的展開收縮，通常的想法是通過控制的元素屬性和之間的切換，雖然說功能可以實現，但是這種展開是沒有任何動畫的效果，只是單純的顯示與隱藏。

http://dobinspark.com.cn/

前言：

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

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

?　　1.先上CSS參考手冊關于max-height的說明

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

　　上實例：

      /*css*/  
.element{
            height: 0;
            overflow: hidden;
            transition: height .25s;
            background-color: pink;
        }
        :checked ~ .element{
            height: 100%; /*高度100%和auto都是生硬的效果，給定具體值可以實現動畫*/
        }

/* html*/
<input id="check" type="checkbox">
<div class="element">
     <div class="box" style="width: 100%;height: 800px">div>
div>
<label for="check" >收縮label>

　　max-height的方法實現過程：

/*css*/
        .element{
            max-height: 0;
            overflow: hidden;
            transition: max-height .25s;
            background-color: pink;
        }
        :checked ~ .element{
            max-height: 2000px; /*足夠存放內容的高度*/
        }
/*html*/
<input id="check" type="checkbox">
<div class="element">
     <div class="box" style="width: 100%;height: 800px">div>
div>
<label for="check" >收縮label>

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

后記：當初看了張鑫旭的CSS世界，對max-height有過一點印象，最近接觸使用到height展開收縮動畫這一點，所以寫編文章記錄學習一下，關于這一點詳細的具體介紹可以參考《CSS世界》一書中的介紹，其中可能存在疑點或者錯誤，如果有錯誤的地方，歡迎各位大牛指正！獻上花花。。。(*^__^*) 嘻嘻……

云服務器 GPU云服務器 jQuery收縮展開表視圖展開收縮 JS點擊展開收縮 js慢慢展開收縮效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2215.html

《CSS世界》閱讀筆記（二）——塊級元素與基本尺寸

摘要：塊級元素基本概念塊級元素是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示。其中內部尺寸由內部元素決定還有一類叫作外部尺寸寬度由外部元素決定。所以子元素的高度設為是無效的。此時的就會有計算值，即使祖先元素的計算為也是如此。塊級元素基本概念塊級元素：是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示。塊級元素和display 為 block 的元素不是一個概念。每...

lylwyy2016 2019-08-29 18:31 評論0 收藏0
jQuery操作之效果

摘要：，用于綁定兩個或多個事件處理器函數，以響應被選元素的輪流的事件。用選擇器選中第二個，給它綁定事件，現在是顯示的，它會在一秒鐘之內慢慢的隱藏，實現淡出效果。，通過不透明度的變化來實現所有匹配元素的淡出效果。效果如下，，關閉頁面上所有的動畫。 jQuery操作之效果效果操作一共分五類：1.基本，2.滑動，3.淡入淡出，4.自定義，5.設置showImg(https://segmentfa...

seal_de 2019-08-21 11:47 評論0 收藏0
《css世界》- 詳細重點筆記與技巧

摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內一些重要的概念與技巧。概述在《css世界》這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！！！以下是摘自每章內一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...

MasonEast 2019-08-02 12:03 評論0 收藏0
《css世界》- 詳細重點筆記與技巧

摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內一些重要的概念與技巧。概述在《css世界》這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲！！！以下是摘自每章內一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等; ps: 特別是 line-h...

趙連江 2019-08-29 17:20 評論0 收藏0