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

這個(gè) 動(dòng)畫我們需要考慮以下幾點(diǎn)：

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

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

3. 不使用任何動(dòng)畫框架。

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

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

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

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

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

?

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

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

?

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

總結(jié)

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

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