如何爲不定高度(height:auto)的元素添加CSS3 transition-property:height 動畫

時間 2019-11-10

標籤如何不定高度 height auto 元素添加 css3 css transition property 動畫欄目 CSS 简体版

原文原文鏈接

但一個元素不設置height時，它的默認值是 auto，瀏覽器會計算出實際的高度。css

但若是想給一個 height:auto 的塊級元素的高度添加 CSS3 動畫時，該怎麼辦呢？html

從 MDN 的能夠查到 CSS 支持動畫的屬性中的 height 屬性以下：web

height ：yes, as a length, percentage or calc(); // 當 height 的值是 length，百分比或 calc() 時支持 CSS3 過渡。瀏覽器

因此當元素 height : auto 時，是不支持 CSS3 動畫的。ide

除了經過 JS 獲取精確的 height 值的方法外，其實咱們能夠使用 max-height 代替 height。動畫

只要咱們設置一個確定比元素自增加大的高度值就能夠了。固然，由於是根據 max-height 值進行過渡效果，因此最好不要大得離譜，不然動畫效果不理想。spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8">
 5         <style>
 6             *{
 7                 margin: 0;
 8                 padding:0;
 9             }
10             div{
11                 
12                 display: inline-block;
13                 overflow: hidden;
14                 background-color: orange;
15                 max-height: 20px;
16                 -webkit-transition: max-height 1s;
17                 transition: max-height 1s;
18             }
19             div:hover{
20                 max-height:200px;
21             }
22         </style>
23     </head>
24     <body>
25         <div>
26             <p>我不是height，是max-height</p>
27             <p>我不是height，是max-height</p>
28             <p>我不是height，是max-height</p>
29             <p>我不是height，是max-height</p>
30             <p>我不是height，是max-height</p>
31             <p>我不是height，是max-height</p>
32         </div>
33     </body>
34 </html>