CSS 奇技淫巧：動態高度過渡動畫

這個問題源自於掘金上的一個留言，一個朋友問到，爲何我下面這段代碼的高度過渡動畫失效了？

僞代碼大概是這樣：

{
    height: unset;
    transition: all 0.3s linear;
    will-change: height;

    &.up {
        height: 0;
    }
    &.down {
        height: unset;
    }
}
複製代碼

把它還原成一個實際的 Demo，效果大概是這樣（本質想的想法是經過給元素切換它的 .up，.down 類，讓它實現展開、合上的動畫 ）：

嗯哼？很奇怪，明明給 height 屬性設置了 transition，爲何過渡動畫沒有觸發，而是直接一步到位展開了呢？

咱們期待的效果是這樣的：

transition 不支持 height: auto

當上述代碼設置成 height: unset 時，實際等同於設置了 height: auto，咱們的想法是但願這段代碼可以容器支持文本的動態高度。每次展開的時候，過渡展開到容器自己的高度便可。

查看規範，究其緣由，在於 CSS transtion 不支持元素的高度爲 auto 的變化。

若是把上述的 height: unset 替換成一個具體的高度值，則動畫是生效的，譬如：

{
    &.up {
        height: 0;
    }
    &.down {
      - height: unset;
      + height: 500px;
    }
}
複製代碼

可是，咱們又但願可以作到動態高度的過渡轉換，是否是就沒有辦法了麼？

巧用 max-height 適配動態高度

嘿嘿，這裏有一個很是有意思的小技巧。既然不支持 height: auto，那咱們就另闢蹊徑，利用 max-height 的特性來作到動態高度的伸縮。

咱們改造一下上述代碼，將 height: 0 替換爲 max-height: 0，將 height: auto 替換成 max-height: 1000px，僞代碼大概是這個意思：

{
    max-height: 0;
    transition: max-height 0.3s linear;

    &.up {
        max-height: 0;
    }
    &.down {
        max-height: 1000px;
    }
}
複製代碼

咱們估算一下實際容器的最大高度，這裏的 1000px 只須要比最大高度高便可。可是這裏不能設置的過高，最高是貼近最大的使用高度便可，後面會聊到爲何。

因爲 max-height 只是限制文本的最大高度，當容器的實際高度沒有達到限制的最大高度，將不會繼續變高，看看效果：

CodePen Demo -- the height property transition unwork

小缺陷

總體效果仍是很是的 Nice 的，固然，可能有兩個小缺陷，

1. 若是實際場景中 max-height 須要用到而且有其它做用，那麼可能這種方法就沒法知足需求了
2. 另外一個缺點就是視覺上有延遲，和實際高度相差越大越明顯。也就是說，若是容器實際高度只有 200px，max-height 爲 1000px，動畫時間爲 1s，緩動函數爲 linear。實際動畫從 0 到 200px 的高度過渡時間只有 0.2s，這一點須要很是注意~

由於原本展開動畫是指望將容器的高度用 1s 的時間拉伸至 1000px，實際在 200px 的時候就中止了，因此動畫時間只有 0.2 秒。綜上，方法是好方法，可是具體使用的時候要須要具體分析。

最後

好了，一個小細節，但願對你有所幫助，本文到此結束，但願對你有幫助 :)，想 Get 到最有意思的 CSS 資訊，千萬不要錯過個人公衆號 -- iCSS前端趣聞

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。