給不定高度/寬度元素添加CSS3 transition動畫


  當一個元素不設置height時,它的默認值是 auto,瀏覽器會計算出實際的高度。寬度類似。

  但如果想給一個 height:auto 的塊級元素的高度添加 CSS3 動畫時,該怎么辦呢?

  從 MDN 的描述可以查到 CSS 支持動畫的屬性中的 height 屬性如下:

  height :yes, as a lengthpercentage 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) } }

  這樣即可實現一個確定高度到自動高度的過渡動畫效果。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM