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

但一個(gè)元素不設(shè)置height時(shí)，它的默認(rèn)值是 auto，瀏覽器會(huì)計(jì)算出實(shí)際的高度。

但如果想給一個(gè) height:auto 的塊級(jí)元素的高度添加 CSS3 動(dòng)畫時(shí)，該怎么辦呢？

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

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

所以當(dāng)元素?height : auto 時(shí)，是不支持 CSS3 動(dòng)畫的。

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

只要我們?cè)O(shè)置一個(gè)肯定比元素自增長大的高度值就可以了。當(dāng)然，因?yàn)槭歉鶕?jù) max-height 值進(jìn)行過渡效果，所以最好不要大得離譜，否則動(dòng)畫效果不理想。

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。