html div 子元素 过多 卡顿,CSS不定高元素transition动画的解决方案
CSS不定高元素transition動畫的解決方案
類別： 技術(shù)·CSS
時間：2019-07-27 23:41:35
字?jǐn)?shù)：3297
版權(quán)所有，未經(jīng)允許，請勿轉(zhuǎn)載，謝謝合作~
### 前言
CSS中transition可以方便的實現(xiàn)我們的過渡動畫效果，但并不是元素的所有屬性都可以過渡，那有哪些元素支持動畫呢，這里有個列表：
所有支持transition的屬性
這么多屬性估計記不住，可以理解成，過渡是只能由元素的值A(chǔ)逐漸變成值B，如果A與B不是一個確切的具體數(shù)字，也就無從得知“運動軌跡”，動畫則無效。
比如我們不能讓A圖片過渡變成B圖片，因為A圖片與B圖片一般不是簡單的數(shù)字變換。
雖然height支持transition,但如果由height: 0;變成height: auto;還是無效的，因為css引擎無法得知auto是多少。
不過我們還是有一些簡單的方案可以解決這個問題的。
###場景1 max-height與scaleY展開收起
我們有個二級導(dǎo)航，在點擊某一級導(dǎo)航時，需展開其下的二級導(dǎo)航，但我們在純css中無從得到二級導(dǎo)航的個數(shù)，但高度不定，一般transition不會生效。
場景1解決方案：使用max-height。 如果能確定最大高度，則直接設(shè)置該值；如果不能，確定一個合適的值(什么叫合適值呢？就是較大又不會過大，視業(yè)務(wù)而定，如果設(shè)一個過大的max-height，會因為運行軌跡問題顯有卡頓嚴(yán)重)，然后允許有滾動條(如果在移動端的全屏下，滾動條不像pc端這么怪異)
關(guān)鍵代碼：
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進(jìn)行縮放，只適用于一個一級導(dǎo)航的情況，否則下面會出現(xiàn)空白。
關(guān)鍵代碼：
```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: 不定高的導(dǎo)航展開動畫demo
###場景2，移動端全屏不定高導(dǎo)航下拉動畫
這應(yīng)該是一種比較常見的場景，因為全屏，可以使用fixed或absolute，高度可以由0%變成100%，再結(jié)合場景1的導(dǎo)航列表，比較簡單，唯一需要主要的是，該塊設(shè)置top，需要設(shè)置一個一樣高度bottom避免下面少了一塊，因為這種場景height: 100%情況下增加top會使得其下移。
主要代碼：
html
```html
fixed的頭部
點擊展開收起第二個導(dǎo)航這是頁面內(nèi)容
```
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(請使用移動端打開)： 移動端全屏不定高導(dǎo)航下拉動畫demo
###提問
##### 為什么我們的非絕對定位元素height不能由0%至100%呢？
規(guī)范中寫到，如果包含塊的高度沒有顯式指定(如父元素高度為默認(rèn)值auto)，并且該元素不是絕對定位，則計算值為auto，auto則transition不會生效。
全部留言
我要留言
內(nèi)容：
網(wǎng)名：
郵箱：
個人網(wǎng)站：
發(fā)表
總結(jié)
以上是生活随笔為你收集整理的html div 子元素 过多 卡顿,CSS不定高元素transition动画的解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 笔记本连接显示器后没有声音_电脑用HDM
- 下一篇： css阻止换行_CSS中，如何处理短内容