通常是借助 JS 動態(tài)去獲取元素的高度（還有些麻煩的，需要渲染后才能知道高度）。其實css 也有一個巧用max-height適配動態(tài)高度的解決方案。
眾所周知，高度在設置成auto?關鍵詞時是不會觸發(fā)transition過渡動畫的，下面是偽代碼。
div{
height: 0;
transition: 1s
}
.wrap:hover div{
height: auto
}
效果如下：
如果希望展開時有過渡動畫，例如這樣。
Kapture 2023-01-31 at 19.21.02通常是借助 JS 動態(tài)去獲取元素的高度（還有些麻煩的，需要渲染后才能知道高度）。其實CSS 也有一個巧用max-height適配動態(tài)高度的解決方案，下面是偽代碼。
div{
max-height: 0;
transition: 1s
}
.wrap :hover div{
max-height: 800px /*大概的值，需要超過元素高度*/
}
有興趣的可以參考這篇文章：CSS 奇技淫巧：動態(tài)高度過渡動畫[1]，但是有一個局限性，高度差異越大，過渡效果越糟糕，假設元素真實高度只有 100px?，如果 max-height為800px?，那只有前1/8有動畫，就像這樣。
那么，有沒有更好的方式來解決這個問題呢？
當然也是有的，這次就來介紹一個全新的方式來實現(xiàn)動態(tài)高度過渡，一起看看吧
一、grid 布局中的 fr 單位
grid?布局中有一個全新的fr?單位，用于定義網(wǎng)格軌道大小的彈性系數(shù)。grid?布局比較復雜，三言兩語不可能說清楚，有興趣的可以參考grid相關教程，例如
- 張鑫旭老師的寫給自己看的display: grid布局教程[2]。
- 大漠老師的現(xiàn)代 Web 布局[3]?。
這里簡單介紹一下fr單位的用途，比如有這樣一個布局。
<div class="grid">
<span class="item">1fr</span>
<span class="item">1fr</span>
<span class="item">1fr</span>
</div>
關鍵樣式如下：
.grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
}
可以得到這樣的效果：
這里的repeat(3, 1fr)其實就是1fr 1fr 1fr的簡寫，表示 3 等分剩余空間。還可以設置在垂直方向上。
.grid{
grid-template-rows: repeat(3, 1fr);
}
效果如下：
也可以改變各自的分配比例。
.grid{
grid-template-rows: 1fr 2fr 1fr;
}
效果如下：
現(xiàn)在來看一種特殊情況，還可以將分配比例設置為0fr。
.grid{
grid-template-rows: 0fr 2fr 1fr;
}
效果如下：
是不是有點奇怪，0fr怎么和1fr占比相同呢？
其實這是由grid的最小尺寸規(guī)則決定的，此時的最小高度是min-content，也就是由內(nèi)部文本決定的。如果沒有文字，0fr自然就不占空間了，下面是去除文字后的效果。
如果想保留文字并且不占空間怎么辦呢？可以直接手動設置最小尺寸。
span{
min-height: 0
}
這樣0fr也會不占空間。
還可以借助超出隱藏，徹底隱藏子內(nèi)容。
.grid{
overflow: hidden;
}
span{
min-height: 0
}
效果如下：
應該還是比較容易理解吧，那么和動畫有啥關系呢？接著往下看
二、grid 中的過渡動畫
有同學可能納悶了，為啥要折騰這個0fr呢？下面就來揭曉。
如果重新設置1fr，子內(nèi)容又會重新出現(xiàn)。
.grid{
grid-template-rows: 1fr 2fr 1fr;
}
下面重點來了，grid中的fr單位也是支持過渡動畫的(0fr=>1fr )。
.grid{
grid-template-rows: 1fr 2fr 1fr;
transition: .3s
}
效果如下：
?
?
由于高度是由內(nèi)部文本撐開的，也就是高度不確定，而0fr到1fr的過渡變化，相當于實現(xiàn)了 高度不固定的過渡動畫。
進一步精簡一下，可以實現(xiàn)這樣的效果。
這就是高度不固定動畫的雛形了，換個文本多一點也完美支持。
Kapture 2023-01-31 at 19.48.37
完整 demo可以查看以下任意鏈接
- CSS auto height transition (juejin.cn)[4]
- CSS auto height transition (codepen.io)[5]
- CSS auto height transition (runjs.work)[6]
三、自適應高度動畫的兩個實例
現(xiàn)在根據(jù)上面的原理來實現(xiàn)兩個實例。
首先來看文章最開頭的示例，html 結構是這樣的。
<div class="wrap">
<button class="trigger">鼠標放上來試試</button>
<div class="grid">
<div><p>歡迎關注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧，比如這篇文章，如何讓 auto height 支持過渡動畫？一起看看吧</p></div>
</div>
</div>
簡單修飾一下，應該比較容易，可以得到這樣的效果：
然后通過上面的技巧將下拉內(nèi)容隱藏起來，關鍵樣式如下：
.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;
}
這樣就實現(xiàn)了不定高度的過渡動畫。
完整 demo可以查看以下任意鏈接：
- CSS auto height drop (juejin.cn)[7]
- CSS auto height drop (codepen.io)[8]
- CSS auto height drop (runjs.work)[9]
如果僅僅是懸浮窗口，由于是絕對定位，不會影響其他布局，其實是可以用transform scale 進行縮放的，再來看另外一個更加實用的例子，常見的菜單展開收起效果，就像這樣。
可以看到，在展開的同時，下方的元素也被擠壓下去了，這樣效果更加自然，也是transform實現(xiàn)不了的，這里的切換是通過:checked實現(xiàn)的，關鍵代碼如下：
<input hidden type="checkbox" id="s1" checked />
<label for="s1">工作臺</label>
<div class="sub">
<ul>
<li>項目列表</li>
<li>數(shù)據(jù)配置器</li>
</ul>
</div>
ul{
min-height: 0;
}
.sub {
display: grid;
grid-template-rows: 0fr;
transition: 0.3s;
overflow: hidden;
}
:checked ~ .sub {
grid-template-rows: 1fr;
}
完整 demo可以查看以下任意鏈接：
- CSS auto height menu (juejin.cn)[10]
- CSS auto height menu (codepen.io)[11]
- CSS auto height menu (runjs.work)[12]
四、注意事項和一些局限性
下面是一些注意事項。
這里的動畫源于grid-template-rows?的變化，也就是0fr?到1fr。
注意，注意，注意，這里的0fr?必須是0fr?，不能是0?或者0px?，必須是fr單位。
下面是改為40px的效果（動畫丟失）。
再者，0fr也不支持calc計算，直接被認為不合法。
這意味著，例如你希望默認有一個固定高度（非0），然后展開到自適應高度，這種方法是無法實現(xiàn)過渡動畫的，略遺憾
