當一個元素不設置height時,它的默認值是 auto,瀏覽器會計算出實際的高度。寬度類似。
但如果想給一個 height:auto 的塊級元素的高度添加 CSS3 動畫時,該怎么辦呢?
從 MDN 的描述可以查到 CSS 支持動畫的屬性中的 height 屬性如下:
height :
yes, as a length, percentage or calc(); // 意思是當 height 的值是 length,百分比或 calc() 時支持 CSS3 過渡。
所以當元素 height : auto 時,是不支持 CSS3 動畫的。
那么如何處理 auto 的過渡動畫呢?解決方案有2個:
1、第一種:通過 JS 獲取精確的 height 值的方法 —— 不推薦,特別是在VUE這種框架下不推薦使用。
2、第二種:其實我們可以使用 max-height 代替 height。
只要我們設置一個肯定比元素自增長大的高度值就可以了。
當然,因為是根據 max-height 值進行過渡效果,所以最好不要大得離譜,否則動畫效果不理想。
如下:
.s-tag-more{ ... transform rotate(270deg) transition:transform 0.6s;
} .s-tag-box{ ... max-height 30px overflow: hidden; transition:max-height 1s;
} // 動畫效果如下: .tag-container{ ... &:hover .s-tag-box{ max-height 200px } &:hover .s-tag-more{ transform rotate(90deg) } }
這樣即可實現一個確定高度到自動高度的過渡動畫效果。