如下圖，要實(shí)現(xiàn)一個(gè)超出一定高度默認(rèn)折疊的div層，下邊帶有展開(kāi)/折疊按鈕，點(diǎn)擊按鈕實(shí)現(xiàn)展開(kāi)/折疊。

 原來(lái)的代碼：

.attrTable {
      border-right: 1px solid #f5f5f5;
      border-bottom: 1px solid #f5f5f5;
      height: auto;
      transition: height 1s ease;

      &.collapse {
        height: 400px;
        overflow: hidden;
      }
}

這種寫(xiě)法是不會(huì)生效的，由于div層的高度是auto，折疊后的高度是400px，瀏覽器無(wú)法計(jì)算從auto到400px的過(guò)渡處理。當(dāng)然也可以在獲取數(shù)據(jù)并渲染之后實(shí)時(shí)計(jì)算具體高度，但這個(gè)就太復(fù)雜了。

有效的解決方案就是使用max-height代替height，代碼如下：

.attrTable {
  border-right: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  height: auto; /* 保持動(dòng)態(tài)高度 */
  max-height: 5000px; /* 展開(kāi)時(shí)上限（遠(yuǎn)大于實(shí)際動(dòng)態(tài)高度） */
  overflow: visible; /* 展開(kāi)時(shí)顯示全部?jī)?nèi)容 */
  transition: max-height 1s ease; /* 過(guò)渡目標(biāo)改為 max-height */

  &.collapse {
    max-height: 400px; /* 折疊時(shí)固定上限 */
    overflow: hidden; /* 隱藏超出部分 */
  }
}

如上，給div層設(shè)置一個(gè)很大的max-height，使用max-height來(lái)作為動(dòng)態(tài)效果觸發(fā)的樣式，就能實(shí)現(xiàn)展開(kāi)/折疊的過(guò)渡效果了。

關(guān)鍵說(shuō)明：
1. max-height 取值技巧：
展開(kāi)狀態(tài)的 max-height 要設(shè)為 “肯定大于動(dòng)態(tài)高度” 的數(shù)值（如 5000px，根據(jù)你的實(shí)際場(chǎng)景調(diào)整，只要不小于最大可能高度即可）。
折疊狀態(tài)的 max-height 保持你要的 400px，實(shí)現(xiàn) “固定高度折疊”。
2. 為什么生效：
展開(kāi)時(shí)：max-height: 5000px（實(shí)際高度由內(nèi)容決定，動(dòng)態(tài)自適應(yīng)），overflow: visible 顯示全部?jī)?nèi)容。
折疊時(shí)：max-height: 400px，超出部分被 overflow: hidden 隱藏，且 max-height 從 5000px → 400px 是 “數(shù)值→數(shù)值” 的過(guò)渡，瀏覽器能正常計(jì)算動(dòng)畫(huà)。
3. 優(yōu)化體驗(yàn)（可選）：
如果動(dòng)態(tài)高度很?。ū热绮坏?400px），折疊時(shí)可能看不到過(guò)渡效果，可給展開(kāi)狀態(tài)加最小高度兜底：

.attrTable {
  /* 其他樣式不變 */
  min-height: 100px; /* 確保展開(kāi)時(shí)至少有一定高度，過(guò)渡更明顯 */
}