移動設(shè)備的特點之一便是屏幕尺寸多種多樣，所以我們在制作針對移動設(shè)備的動畫時必須不同尺寸屏幕的兼容性。比如我們要制作以下動畫：紅框2為詳細(xì)內(nèi)容，默認(rèn)收起；紅框1處為事件響應(yīng)熱區(qū)，點擊后展開或收起紅框2的內(nèi)容。

這個 動畫我們需要考慮以下幾點：

1. 紅框2的容器為屏幕的100%，內(nèi)容字?jǐn)?shù)不固定，但有最大字?jǐn)?shù)限制;

2. 紅框2相同字?jǐn)?shù)的內(nèi)容在不同尺寸屏幕下的高度不同；

3. 不使用任何動畫框架。

我們在制作下拉展開動畫的時候，一般首先會想到將內(nèi)容節(jié)點的高度設(shè)置為0，然后事件觸發(fā)將內(nèi)容節(jié)點的高度設(shè)為展開后的值。這種方法在內(nèi)容固定并且容器寬度固定的場景下沒有問題，但是并不適用與屏幕尺寸不統(tǒng)一的移動設(shè)備。

那么該怎么做呢？關(guān)鍵字：max-height！移動設(shè)備的特點之一，便是其瀏覽器對css屬性和動畫支持的很好，我們可以大膽的使用。細(xì)節(jié)如下：

1. 將容器收起狀態(tài)的max-height設(shè)置為0，展開狀態(tài)為一個足夠大的值（綜合考慮最大字?jǐn)?shù)限制以及屏幕尺寸）；

2. 展開狀態(tài)的高度值建議采用rem單位，具體取值還需要考慮屏幕尺寸。

簡易demo如下，因demo無法模擬移動設(shè)備的多屏尺寸，大家可以改變container的寬度模擬，當(dāng)然，移動設(shè)備上container的寬度取值為100%：

?

See the Pen 不同尺寸移動設(shè)備下拉動畫適配 by Joe (@ihardcoder) on CodePen.

用max-height實現(xiàn)有一個缺點，大家應(yīng)該會發(fā)現(xiàn)，展開和收起的動畫快慢不一樣！這個缺陷并不容易彌補，但是可以通過媒體查詢精良精確展開狀態(tài)的max-height取值來彌補。

?

轉(zhuǎn)載于:https://www.cnblogs.com/ihardcoder/p/4500024.html

總結(jié)

以上是生活随笔為你收集整理的利用max-height适应多尺寸屏幕的下拉动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。