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

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

1. 紅框2的容器為屏幕的100%，內容字數不固定，但有最大字數限制;

2. 紅框2相同字數的內容在不同尺寸屏幕下的高度不同；

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

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

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

1. 將容器收起狀態的max-height設置為0，展開狀態為一個足夠大的值（綜合考慮最大字數限制以及屏幕尺寸）；

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

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

?

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

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

?

轉載于:https://www.cnblogs.com/ihardcoder/p/4500024.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。