CSS 動態(tài)高度過渡動畫效果的實現(xiàn)

發(fā)布時間：2021-01-15 16:29:30 作者：ChokCoco

我要評論

這篇文章主要介紹了CSS 動態(tài)高度過渡動畫效果的實現(xiàn),本文通過實例代碼給大家介紹的非常想詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

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

偽代碼大概是這樣：

{
    height: unset;
    transition: all 0.3s linear;
    will-change: height;
 
    &.up {
        height: 0;
    }
    &.down {
        height: unset;
    }
}

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

嗯哼？很奇怪，明明給height屬性設(shè)置了transition，為什么過渡動畫沒有觸發(fā)，而是直接一步到位展開了呢？

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

transition 不支持 height: auto

當上述代碼設(shè)置成height: unset時，實際等同于設(shè)置了height: auto，我們的想法是希望這段代碼能夠容器支持文本的動態(tài)高度。每次展開的時候，過渡展開到容器本身的高度即可。

查看規(guī)范，究其原因，在于CSS transtion 不支持元素的高度為 auto 的變化。

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

{
    &.up {
        height: 0;
    }
    &.down {
      - height: unset;
      + height: 500px;
    }
}

但是，我們又希望能夠做到動態(tài)高度的過渡轉(zhuǎn)換，是不是就沒有辦法了么？

巧用max-height適配動態(tài)高度

嘿嘿，這里有一個非常有意思的小技巧。既然不支持height: auto，那我們就另辟蹊徑，利用max-height的特性來做到動態(tài)高度的伸縮。

我們改造一下上述代碼，將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只需要比最大高度高即可。但是這里不能設(shè)置的太高，最高是貼近最大的使用高度即可，后面會聊到為什么。

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

CodePen Demo -- the height property transition unwork

小缺陷

整體效果還是非常的 Nice 的，當然，可能有兩個小缺陷，

如果實際場景中max-height需要用到并且有其它作用，那么可能這種方法就無法滿足需求了
另一個缺點就是視覺上有延遲，和實際高度相差越大越明顯。也就是說，如果容器實際高度只有 200px，max-height為 1000px，動畫時間為 1s，緩動函數(shù)為 linear。實際動畫從 0 到 200px 的高度過渡時間只有 0.2s，這一點需要非常注意~

因為本來展開動畫是期望將容器的高度用 1s 的時間拉伸至 1000px，實際在 200px 的時候就停止了，所以動畫時間只有 0.2 秒。綜上，方法是好方法，但是具體使用的時候要需要具體分析。

到此這篇關(guān)于CSS 動態(tài)高度過渡動畫效果的實現(xiàn)的文章就介紹到這了,更多相關(guān)css高度過渡動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！