Home > Article > Web Front-end > How to add CSS3 transition_html/css_WEB-ITnose for elements with variable height
How to add CSS3 transition_html/css_WEB-ITnose for elements with variable height
- WBOYOriginal
- 2016-06-24 11:42:231446browse
But when an element does not set height, its default value is auto, and the browser will calculate the actual height.
But what if you want to add CSS3 animation to the height of a block-level element with height:auto?
From MDN, you can find the height attribute in CSS animation-supported properties as follows:
height: yes, as a length, percentage or calc(); // When the value of height is CSS3 transitions are supported when using length, percentage or calc().
So when the element height : auto, CSS3 animation is not supported.
In addition to getting the exact height value through JS, we can actually use max-height instead of height.
As long as we set a height value that is definitely larger than the element's auto-increase, that's it. Of course, because the transition effect is based on the max-height value, it is best not to be ridiculously large, otherwise the animation effect will not be ideal.
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>
This is my first blog post, I hope you can learn something. Of course, I would also like to receive your suggestions!