這個(gè)問(wèn)題源自于掘金上的一個(gè)留言，一個(gè)朋友問(wèn)到，為什么我下面這段代碼的高度過(guò)渡動(dòng)畫失效了？

偽代碼大概是這樣：

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

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

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

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

transition 不支持 height: auto

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

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

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

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

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

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

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

我們改造一下上述代碼，將height: 0替換為max-height: 0，將height: auto替換成max-height: 1000px，偽代碼大概是這個(gè)意思：

{
    max-height: 0;
    transition: max-height 0.3s linear;
 
    &.up {
        max-height: 0;
    }
    &.down {
        max-height: 1000px;
    }
}

我們估算一下實(shí)際容器的最大高度，這里的1000px只需要比最大高度高即可。但是這里不能設(shè)置的太高，最高是貼近最大的使用高度即可，后面會(huì)聊到為什么。

由于max-height只是限制文本的最大高度，當(dāng)容器的實(shí)際高度沒(méi)有達(dá)到限制的最大高度，將不會(huì)繼續(xù)變高，看看效果：

CodePen Demo -- the height property transition unwork

小缺陷

整體效果還是非常的 Nice 的，當(dāng)然，可能有兩個(gè)小缺陷，

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

因?yàn)楸緛?lái)展開(kāi)動(dòng)畫是期望將容器的高度用 1s 的時(shí)間拉伸至 1000px，實(shí)際在 200px 的時(shí)候就停止了，所以動(dòng)畫時(shí)間只有 0.2 秒。綜上，方法是好方法，但是具體使用的時(shí)候要需要具體分析。

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

最新評(píng)論