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

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

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

從 MDN?的可以查到?CSS 支持動畫的屬性中的 height 屬性如下：

length,?percentage?or calc(); // 當 height 的值是 length，百分比或 calc() 時支持 CSS3 過渡。

所以當元素?height : auto 時，是不支持 CSS3 動畫的。

除了通過 JS 獲取精確的 height 值的方法外，其實我們可以使用 max-height 代替 height。

只要我們設置一個肯定比元素自增長大的高度值就可以了。當然，因為是根據 max-height 值進行過渡效果，所以最好不要大得離譜，否則動畫效果不理想。

1

2

3

4

5

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

23

24

25

26

我不是height，是max-height

27

我不是height，是max-height

28

我不是height，是max-height

29

我不是height，是max-height

30

我不是height，是max-height

31

我不是height，是max-height

32

33

34

總結

以上是生活随笔為你收集整理的html加动画不改变高度,怎么为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。