CSS 如何讓 auto height 完美支持過渡動畫？

衆所周知，高度在設置成auto關鍵詞時是不會觸發transition過渡動畫的，下面是僞代碼

div{
  height: 0;
  transition: 1s
}
.wrap:hover div{
  height: auto
}

效果如下

如果希望展開時有過渡動畫，例如這樣

通常是藉助 JS 動態去獲取元素的高度（還有些麻煩的，需要渲染後才能知道高度）。其實 CSS 也有一個巧用max-height適配動態高度的解決方案，下面是僞代碼

div{
  max-height: 0;
  transition: 1s
}
.wrap :hover div{
  max-height: 800px /*大概的值，需要超過元素高度*/
}

有興趣的可以參考這篇文章：CSS 奇技淫巧：動態高度過渡動畫 [1]，但是有一個侷限性，高度差異越大，過渡效果越糟糕，假設元素真實高度只有 100px，如果 max-height爲800px，那只有前1/8有動畫，就像這樣

那麼，有沒有更好的方式來解決這個問題呢？

當然也是有的，這次就來介紹一個全新的方式來實現動態高度過渡，一起看看吧

一、grid 佈局中的 fr 單位

grid佈局中有一個全新的fr單位，用於定義網格軌道大小的彈性係數。grid佈局比較複雜，三言兩語不可能說清楚，有興趣的可以參考grid相關教程，例如

這裏簡單介紹一下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;
}

效果如下

現在來看一種特殊情況，還可以將分配比例設置爲0fr

.grid{
  grid-template-rows: 0fr 2fr 1fr;
}

效果如下

是不是有點奇怪，0fr怎麼和1fr佔比相同呢？

其實這是由grid的最小尺寸規則決定的，此時的最小高度是min-content，也就是由內部文本決定的。如果沒有文字，0fr自然就不佔空間了，下面是去除文字後的效果

如果想保留文字並且不佔空間怎麼辦呢？可以直接手動設置最小尺寸

span{
  min-height: 0
}

這樣0fr也會不佔空間

還可以藉助超出隱藏，徹底隱藏子內容

.grid{
  overflow: hidden;
}
span{
  min-height: 0
}

效果如下

應該還是比較容易理解吧，那麼和動畫有啥關係呢？接着往下看

二、grid 中的過渡動畫

有同學可能納悶了，爲啥要折騰這個0fr呢？下面就來揭曉

如果重新設置1fr，子內容又會重新出現

.grid{
  grid-template-rows: 1fr 2fr 1fr;
}

下面重點來了，grid中的fr單位也是支持過渡動畫的 (0fr=>1fr )

.grid{
  grid-template-rows: 1fr 2fr 1fr;
  transition: .3s
}

效果如下

由於高度是由內部文本撐開的，也就是高度不確定，而0fr到1fr的過渡變化，相當於實現了 高度不固定的過渡動畫

進一步精簡一下，可以實現這樣的效果

這就是高度不固定動畫的雛形了，換個文本多一點也完美支持

完整 demo 可以查看以下任意鏈接

三、自適應高度動畫的兩個實例

現在根據上面的原理來實現兩個實例。

首先來看文章最開頭的示例，HTML 結構是這樣的

<div class="wrap">
  <button class="trigger">鼠標放上來試試</button>
  <div class="grid">
    <div><p>歡迎關注前端偵探，這裏有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧，比如這篇文章，如何讓 auto height 支持過渡動畫？一起看看吧</p></div>
  </div>
</div>

簡單修飾一下，應該比較容易，可以得到這樣的效果

然後通過上面的技巧將下拉內容隱藏起來，關鍵樣式如下

.grid{
  display: grid;
  grid-template-rows: 0fr;
  transition: .3s;
  overflow: hidden;
}
.grid>div{
  min-height: 0;
}

然後通過hover觸發顯示，也就是改變grid-template-rows

.wrap:hover .grid{
  grid-template-rows: 1fr;
}

這樣就實現了不定高度的過渡動畫

完整 demo 可以查看以下任意鏈接

如果僅僅是懸浮窗口，由於是絕對定位，不會影響其他佈局，其實是可以用transform scale 進行縮放的，再來看另外一個更加實用的例子，常見的菜單展開收起效果，就像這樣

可以看到，在展開的同時，下方的元素也被擠壓下去了，這樣效果更加自然，也是transform實現不了的，這裏的切換是通過:checked實現的，關鍵代碼如下

<input hidden type="checkbox" id="s1" checked />
<label for="s1">工作臺</label>
<div class="sub">
  <ul>
    <li>項目列表</li>
    <li>數據配置器</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 可以查看以下任意鏈接

四、注意事項和一些侷限性

下面是一些注意事項。

這裏的動畫源於grid-template-rows的變化，也就是0fr到1fr

**注意，注意，注意，**這裏的0fr必須是0fr，不能是0或者0px，必須是fr單位

下面是改爲40px的效果（動畫丟失）

再者，0fr也不支持calc計算，直接被認爲不合法

這意味着，例如你希望默認有一個固定高度（非 0），然後展開到自適應高度，這種方法是無法實現過渡動畫的，略遺憾😥

五、最後總結一下

最後再來回顧一下實現關鍵過程

.grid{
  display: grid;
  grid-template-rows: 0fr;
  transition: .3s;
  overflow: hidden;
}
.grid>div{
  min-height: 0;
}
.wrap:hover .grid{
  grid-template-rows: 1fr;
}

主要是利用了grid彈性佈局可以實現過渡動畫的特點，下面總結一些實現要點

  1. 高度在設置成auto關鍵詞時不會觸發transition過渡動畫

  2. grid佈局中的fr單位，可以用於定義網格軌道大小的彈性係數

  3. grid佈局的尺寸計算規則是由最小高度決定的，默認是min-content，也就是由內部文本決定的，可以通過手動設置min-height來實現0fr

  4. grid佈局也支持過渡動畫 (0fr=>1fr )，這樣就實現高度不固定的過渡動畫

  5. 要使過渡動畫生效，必須是fr單位，其他單位不行，也不能通過calc計算

  6. 這種方法只能實現初始高度爲0到自適應高度的過渡變化，略微遺憾

參考資料

[1]

CSS 奇技淫巧：動態高度過渡動畫: https://github.com/chokcoco/iCSS/issues/91

[2]

寫給自己看的 display: grid 佈局教程: https://www.zhangxinxu.com/wordpress/2018/11/display-grid-css-css3/

[3]

現代 Web 佈局: https://juejin.cn/book/7161370789680250917/section

[4]

CSS auto height transition (juejin.cn): https://code.juejin.cn/pen/7196535838593777667

[5]

CSS auto height transition (codepen.io): https://codepen.io/xboxyan/pen/wvxOMeQ

[6]

CSS auto height transition (runjs.work): https://runjs.work/projects/7649b0bf6a514ad2

[7]

CSS auto height drop (juejin.cn): https://code.juejin.cn/pen/7196535123288784957

[8]

CSS auto height drop (codepen.io): https://codepen.io/xboxyan/pen/JjBzGJE

[9]

CSS auto height drop (runjs.work): https://runjs.work/projects/421934cd37da4d1c

[10]

CSS auto height menu (juejin.cn): https://code.juejin.cn/pen/7196534760661844026

[11]

CSS auto height menu (codepen.io): https://codepen.io/xboxyan/pen/jOpJWmo

[12]

CSS auto height menu (runjs.work): https://runjs.work/projects/2b6cb36b8eb549a5

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/T3-7nQOBSknjeRvCVCY16Q

猜你喜歡