動態高度過渡動畫

先看一個demo

本質想的想法是通過給元素切換它的?.up，.down?類，讓它實現展開、合上的動畫

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

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

?

期待的效果是這樣的：

?

transition 不支持 height: auto

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

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

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

{height: unset;transition: height 0.3s linear;&.up {height: 0;}&.down {height: unset;} }

?

但是，我們又希望能夠做到動態高度的過渡轉換，是不是就沒有辦法了么？

巧用?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?只是限制文本的最大高度，當容器的實際高度沒有達到限制的最大高度，將不會繼續變高，看看效果：

小缺陷

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

如果實際場景中?max-height?需要用到并且有其它作用，那么可能這種方法就無法滿足需求了

另一個缺點就是視覺上有延遲，和實際高度相差越大越明顯。也就是說，如果容器實際高度只有 200px，max-height?為 1000px，動畫時間為 1s，緩動函數為 linear。實際動畫從 0 到 200px 的高度過渡時間只有 0.2s，這一點需要非常注意~

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

?

?

左右切換hover展示

<div></div> div {width: 140px;height: 64px;transition: .8s transform linear; } div:hover {transform: translate(120px, 0); }

總結

以上是生活随笔為你收集整理的动态高度过渡动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。