css3怎麼實現高度從固定到自動的過渡動畫？

.box{
height: 120px;
overflow: hidden;
transition: height ease 0.2s;
}
.box:hover{
height: auto;
}


---

簡單講，目前是不行的。

當然有很多trick，比如設置max-height的動畫（從固定值到一個肯定比auto大的值），或者更複雜的（引入腳本算computed value）方式。

之所以不能直接transition從auto到固定值，有一些深層次的原因。比如auto的實際值取決於layout，而按照現在的css spec，computed value是不包含layout計算的，而transition是針對computed value的。

有一些proposal希望解決這個問題，比如允許transition從固定值到calc(auto)【目前calc是不支持auto關鍵字的】，但在css工作組的任務里這個case還處於低優先順序，並且目前也沒有聽說有瀏覽器有計劃嘗試實現。

---

.box{
max-height: 120px;
overflow: hidden;
transition: height ease 0.2s;
}
.box:hover{
max-height: 100vh;
}


---

用 height 是不行的。

不過，用 max-height 和 min-height 可以實現同等效果。

.box{
max-height: 120px;
min-height: 120px;
overflow: hidden;
transition: max-height ease-out 0.2s;
}
.box:hover{
max-height: 500px;
transition: max-height ease-in 0.2s;
}


如上所示，只要下段的 max-height 是一個實際內容不會達到的高度，那就相當於是 auto 了。

——————————————————————————

當然，如果只是要效果，用 JS 實現也可以。

---

前一陣剛好在做關於height的過渡，簡單說一下我的方法。

我是套了兩層div，給外層div加transition樣式：overflow: hidden;height:0px; transition: height 0.5s;

然後想要設置height:auto時，直接把內層div的height賦給外層div。

基本上實現了這個過渡效果。

如果有人有更好的方法，希望指出。

---

我說一種基於負邊距的 slide 實現。

外層套個div，overflow:hidden，內層負值margin-top，加上過渡。同樣需要js計算高度來設置負邊距。

Demo：Edit fiddle - JSFiddle

---

推薦閱讀：