當一個元素不設置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) } }
這樣即可實現一個確定高度到自動高度的過渡動畫效果。