這篇文章主要講解了“CSS中如何讓auto height支持過渡動(dòng)畫”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS中如何讓auto height支持過渡動(dòng)畫”吧！
創(chuàng)新互聯(lián)公司主營(yíng)石泉網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,APP應(yīng)用開發(fā),石泉h5成都小程序開發(fā)搭建,石泉網(wǎng)站營(yíng)銷推廣歡迎石泉等地區(qū)企業(yè)咨詢
眾所周知，高度在設(shè)置成auto關(guān)鍵詞時(shí)是不會(huì)觸發(fā)transition過渡動(dòng)畫的，下面是偽代碼
div{
height: 0;
transition: 1s
}
.wrap:hover div{
height: auto
}
效果如下
如果希望展開時(shí)有過渡動(dòng)畫，例如這樣
通常是借助 JS 動(dòng)態(tài)去獲取元素的高度（還有些麻煩的，需要渲染后才能知道高度）。其實(shí)CSS 也有一個(gè)巧用max-height適配動(dòng)態(tài)高度的解決方案，下面是偽代碼
div{
max-height: 0;
transition: 1s
}
.wrap :hover div{
max-height: 800px /*大概的值，需要超過元素高度*/
}
有興趣的可以參考這篇文章：CSS 奇技淫巧：動(dòng)態(tài)高度過渡動(dòng)畫，但是有一個(gè)局限性，高度差異越大，過渡效果越糟糕，假設(shè)元素真實(shí)高度只有 100px，如果 max-height為800px，那只有前1/8有動(dòng)畫，就像這樣
那么，有沒有更好的方式來解決這個(gè)問題呢？
當(dāng)然也是有的，這次就來介紹一個(gè)全新的方式來實(shí)現(xiàn)動(dòng)態(tài)高度過渡，一起看看吧
grid布局中有一個(gè)全新的fr單位，用于定義網(wǎng)格軌道大小的彈性系數(shù)。grid布局比較復(fù)雜，三言兩語不可能說清楚，有興趣的可以參考grid相關(guān)教程。
這里簡(jiǎn)單介紹一下fr單位的用途，比如有這樣一個(gè)布局
關(guān)鍵樣式如下
.grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
可以得到這樣的效果
這里的repeat(3, 1fr)其實(shí)就是1fr 1fr 1fr的簡(jiǎn)寫，表示 3 等分剩余空間。還可以設(shè)置在垂直方向上
.grid{
grid-template-rows: repeat(3, 1fr);
}
效果如下
也可以改變各自的分配比例
.grid{
grid-template-rows: 1fr 2fr 1fr;
}
效果如下
現(xiàn)在來看一種特殊情況，還可以將分配比例設(shè)置為0fr
.grid{
grid-template-rows: 0fr 2fr 1fr;
}
效果如下
是不是有點(diǎn)奇怪，0fr怎么和1fr占比相同呢？
其實(shí)這是由grid的最小尺寸規(guī)則決定的，此時(shí)的最小高度是min-content，也就是由內(nèi)部文本決定的。如果沒有文字，0fr自然就不占空間了，下面是去除文字后的效果
如果想保留文字并且不占空間怎么辦呢？可以直接手動(dòng)設(shè)置最小尺寸
span{
min-height: 0
}
這樣0fr也會(huì)不占空間
還可以借助超出隱藏，徹底隱藏子內(nèi)容
.grid{
overflow: hidden;
}
span{
min-height: 0
}
效果如下
應(yīng)該還是比較容易理解吧，那么和動(dòng)畫有啥關(guān)系呢？接著往下看
有同學(xué)可能納悶了，為啥要折騰這個(gè)0fr呢？下面就來揭曉
如果重新設(shè)置1fr，子內(nèi)容又會(huì)重新出現(xiàn)
.grid{
grid-template-rows: 1fr 2fr 1fr;
}
下面重點(diǎn)來了，grid中的fr單位也是支持過渡動(dòng)畫的(0fr=>1fr )
.grid{
grid-template-rows: 1fr 2fr 1fr;
transition: .3s
}
效果如下
由于高度是由內(nèi)部文本撐開的，也就是高度不確定，而0fr到1fr的過渡變化，相當(dāng)于實(shí)現(xiàn)了 高度不固定的過渡動(dòng)畫
進(jìn)一步精簡(jiǎn)一下，可以實(shí)現(xiàn)這樣的效果
這就是高度不固定動(dòng)畫的雛形了，換個(gè)文本多一點(diǎn)也完美支持
完整 demo可以查看以下任意鏈接
CSS auto height transition (codepen.io)
CSS auto height transition (runjs.work)
現(xiàn)在根據(jù)上面的原理來實(shí)現(xiàn)兩個(gè)實(shí)例。
首先來看文章最開頭的示例，HTML 結(jié)構(gòu)是這樣的
歡迎關(guān)注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧，比如這篇文章，如何讓 auto height 支持過渡動(dòng)畫？一起看看吧
簡(jiǎn)單修飾一下，應(yīng)該比較容易，可以得到這樣的效果
然后通過上面的技巧將下拉內(nèi)容隱藏起來，關(guān)鍵樣式如下
.grid{
display: grid;
grid-template-rows: 0fr;
transition: .3s;
overflow: hidden;
}
.grid>div{
min-height: 0;
}
然后通過hover觸發(fā)顯示，也就是改變grid-template-rows
.wrap:hover .grid{
grid-template-rows: 1fr;
}
這樣就實(shí)現(xiàn)了不定高度的過渡動(dòng)畫
完整 demo可以查看以下任意鏈接
可以看到，在展開的同時(shí)，下方的元素也被擠壓下去了，這樣效果更加自然，也是transform實(shí)現(xiàn)不了的，這里的切換是通過:checked實(shí)現(xiàn)的，關(guān)鍵代碼如下
ul{
min-height: 0;
}
.sub {
display: grid;
grid-template-rows: 0fr;
transition: 0.3s;
overflow: hidden;
}
:checked ~ .sub {
grid-template-rows: 1fr;
}
完整 demo可以查看以下任意鏈接
下面是改為40px的效果（動(dòng)畫丟失）
再者，0fr也不支持calc計(jì)算，直接被認(rèn)為不合法
這意味著，例如你希望默認(rèn)有一個(gè)固定高度（非0），然后展開到自適應(yīng)高度，這種方法是無法實(shí)現(xiàn)過渡動(dòng)畫的，略遺憾?
最后再來回顧一下實(shí)現(xiàn)關(guān)鍵過程
.grid{
display: grid;
grid-template-rows: 0fr;
transition: .3s;
overflow: hidden;
}
.grid>div{
min-height: 0;
}
.wrap:hover .grid{
grid-template-rows: 1fr;
}
主要是利用了grid彈性布局可以實(shí)現(xiàn)過渡動(dòng)畫的特點(diǎn)，下面總結(jié)一些實(shí)現(xiàn)要點(diǎn)
高度在設(shè)置成auto關(guān)鍵詞時(shí)不會(huì)觸發(fā)transition過渡動(dòng)畫
grid布局中的fr單位，可以用于定義網(wǎng)格軌道大小的彈性系數(shù)
grid布局的尺寸計(jì)算規(guī)則是由最小高度決定的，默認(rèn)是min-content，也就是由內(nèi)部文本決定的，可以通過手動(dòng)設(shè)置min-height來實(shí)現(xiàn)0fr
grid布局也支持過渡動(dòng)畫(0fr=>1fr )，這樣就實(shí)現(xiàn)高度不固定的過渡動(dòng)畫
要使過渡動(dòng)畫生效，必須是fr單位，其他單位不行，也不能通過calc計(jì)算
這種方法只能實(shí)現(xiàn)初始高度為0到自適應(yīng)高度的過渡變化，略微遺憾
感謝各位的閱讀，以上就是“CSS中如何讓auto height支持過渡動(dòng)畫”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)CSS中如何讓auto height支持過渡動(dòng)畫這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
