CSS不定高元素transition動畫的解決方案
類別： 技術·CSS
時間：2019-07-27 23:41:35
字數：3297
版權所有，未經允許，請勿轉載，謝謝合作~
### 前言
CSS中transition可以方便的實現我們的過渡動畫效果，但并不是元素的所有屬性都可以過渡，那有哪些元素支持動畫呢，這里有個列表：
所有支持transition的屬性
這么多屬性估計記不住，可以理解成，過渡是只能由元素的值A逐漸變成值B，如果A與B不是一個確切的具體數字，也就無從得知“運動軌跡”，動畫則無效。
比如我們不能讓A圖片過渡變成B圖片，因為A圖片與B圖片一般不是簡單的數字變換。
雖然height支持transition,但如果由height: 0;變成height: auto;還是無效的，因為css引擎無法得知auto是多少。
不過我們還是有一些簡單的方案可以解決這個問題的。
###場景1 max-height與scaleY展開收起
我們有個二級導航，在點擊某一級導航時，需展開其下的二級導航，但我們在純css中無從得到二級導航的個數，但高度不定，一般transition不會生效。
場景1解決方案：使用max-height。 如果能確定最大高度，則直接設置該值；如果不能，確定一個合適的值(什么叫合適值呢？就是較大又不會過大，視業務而定，如果設一個過大的max-height，會因為運行軌跡問題顯有卡頓嚴重)，然后允許有滾動條(如果在移動端的全屏下，滾動條不像pc端這么怪異)
關鍵代碼：
html
```html
```
css:
```css
.sub-nav-list {
max-height: 0;
overflow: auto;
transition: max-height 1s ease-out;
}
.show-sub-nav-list .sub-nav-list {
max-height: 150px;
}
```
場景1解決方案2：使用scaleY進行縮放，只適用于一個一級導航的情況，否則下面會出現空白。
關鍵代碼：
```css
.sub-nav-list-2 {
transition: transform 0.4s ease-out;
transform: scaleY(0);
transform-origin: top;
}
.show-sub-nav-list .sub-nav-list-2 {
transform: scaleY(1);
}
```
參考demo: 不定高的導航展開動畫demo
###場景2，移動端全屏不定高導航下拉動畫
這應該是一種比較常見的場景，因為全屏，可以使用fixed或absolute，高度可以由0%變成100%，再結合場景1的導航列表，比較簡單，唯一需要主要的是，該塊設置top，需要設置一個一樣高度bottom避免下面少了一塊，因為這種場景height: 100%情況下增加top會使得其下移。
主要代碼：
html
```html
fixed的頭部
這是頁面內容
```
CSS：
```css
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #00d586;
z-index: 5;
}
.nav-wrap {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 0;
top: 40px;
transition: height 0.4s ease-out;
background-color: #fff;
}
.nav-guide {
position: absolute;
top: 0;
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: 1px solid #ccc;
}
.nav-list-wrap {
position: absolute;
top: 40px;
bottom: 40px;
left: 0;
width: 100%;
overflow-y: auto;
}
.show-nav-list {
height: 100%;
}
```
demo(請使用移動端打開)： 移動端全屏不定高導航下拉動畫demo
###提問
##### 為什么我們的非絕對定位元素height不能由0%至100%呢？
規范中寫到，如果包含塊的高度沒有顯式指定(如父元素高度為默認值auto)，并且該元素不是絕對定位，則計算值為auto，auto則transition不會生效。
全部留言
我要留言
內容：
網名：
郵箱：
個人網站：
發表
 - 新增的元素和廢除的元素)
-阿里云開發者社區...)
作業2 （精選可編輯）)
