背景：height 為auto英染，transition不支持動畫。此時可以通過js計算height來指定動畫被饿。但是如果數(shù)據(jù)量很大四康，自動計算出來的高很高，這時候動畫也會出現(xiàn)卡頓現(xiàn)象狭握。即頁面打開數(shù)據(jù)加載出來闪金，但是點擊收起，無法收起论颅，卡很久哎垦。用自帶的tree組件就會出現(xiàn)這種情況，但是原因沒有確定恃疯。
解決方法1
可以通過js計算高度漏设，再加上限制一個最大高度，比如500px今妄，低于500采用其本身郑口，高度高于500鸳碧，采用500px。這樣不會卡頓犬性。但是中間會有滾動條瞻离，如果外層也有滾動條，就會出現(xiàn)兩列滾動條乒裆。此種方法可以考慮套利。
解決方法2
采用grid布局。參考鏈接：https://www.php.cn/faq/500738.html
//樣式
html,
body {
margin: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: aliceblue;
gap: 15px
}
.trigger {
border: 0;
background-color: royalblue;
color: #fff;
outline: 0;
font-size: 16px;
padding: 0.4em 1em;
border-radius: 0.2em;
cursor: pointer;
}
.grid {
position: absolute;
margin-top: 10px;
max-width: 250px;
border-radius: 5px;
display: grid;
grid-template-rows: 0fr;
transition: 0.3s;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.65);
color: #fff;
}
.grid>* {
min-height: 0;
padding: 0 10px;
}
.wrap:hover .grid {
grid-template-rows: 1fr;
}
span {
padding: 10px;
}
// html代碼
<div class="wrap">
<button class="trigger">鼠標放上來試試</button>
<div class="grid">
<div>
<div style="height: auto;line-height: 32px;">
<p>歡迎關(guān)注前端偵探鹤耍，這里有一些有趣的肉迫、你可能不知道的HTML、CSS稿黄、JS小技巧技巧昂拂，比如這篇文章，如何讓 auto height 支持過渡動畫抛猖？一起看看吧</p>
</div>
<div style="height: auto;line-height: 32px;">
<p>歡迎關(guān)注前端偵探格侯，這里有一些有趣的、你可能不知道的HTML财著、CSS联四、JS小技巧技巧，比如這篇文章撑教，如何讓 auto height 支持過渡動畫朝墩？一起看看吧</p>
</div>
</div>
</div>
</div>
核心樣式如下：
image.png
需要注意的是：class為gird的div 設置的樣式由grid-template-rows: 0fr; 變化到grid-template-rows: 1fr; 這里得保證其只有一個子節(jié)點。如果多個子節(jié)點伟姐，此樣式只控制第一個子節(jié)點收苏。這種情況可以在外層再包裹一次div。
另外：數(shù)據(jù)量多也不再卡頓愤兵，也只有一個滾動條鹿霸。但是如果高度特別高，就會出現(xiàn)動畫效果卡一下秆乳。我理解是因為動畫設置了時間懦鼠，需要0.3秒的時間內(nèi)，完成整個高度的收縮屹堰，所以高度很高就會一下子閃沒肛冶，不會慢慢收縮。
