- When we try to make a
- slide down using CSS transitions.
- The
- starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appear, not transition,
- If we do this from height: 40px; to height: auto;, then it will slide up to height: 0;, and then suddenly jump to the correct height.
How could we do this without using JavaScript?
[pastacode lang=”markup” manual=”%23child0%20%0A%7B%0A%20%20%20%20height%3A%200%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20background-color%3A%20%23dedede%3B%0A%20%20%20%20-moz-transition%3A%20height%201s%20ease%3B%0A%20%20%20%20-webkit-transition%3A%20height%201s%20ease%3B%0A%20%20%20%20-o-transition%3A%20height%201s%20ease%3B%0A%20%20%20%20transition%3A%20height%201s%20ease%3B%0A%23parent0%3Ahover%20%23child0%20%0A%7B%0A%20%20%20%20height%3A%20auto%3B%0A%23child40%20%0A%7B%0A%20%20%20%20height%3A%2040px%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20background-color%3A%20%23dedede%3B%0A%20%20%20%20-moz-transition%3A%20height%201s%20ease%3B%0A%20%20%20%20-webkit-transition%3A%20height%201s%20ease%3B%0A%20%20%20%20-o-transition%3A%20height%201s%20ease%3B%0A%20%20%20%20transition%3A%20height%201s%20ease%3B%0A%7D%0A%23parent40%3Ahover%20%23child40%20%0A%7B%0A%20%20%20%20height%3A%20auto%3B%0A%7D%0Ah1%20%0A%7B%0A%20%20%20%20font-weight%3A%20bold%3B%0A%7D%0A” message=”max height code” highlight=”” provider=”manual”/]- The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
- Use max-height in the transformation and not height. And set a value on max-height
- Use max-height with different transition
- HTML
- CSS
;
- Using relative positioning and works on li elements, & is pure CSS
- CSS
- HTML
;
- Transition from height:0 to height:auto
;
- transition max height value:
;
- Set the height to auto and transition the max-height.
;
- A visual workaround to animating height using CSS3 transitions is to animate the padding instead, and to set explicitly height/max-height
;
- Simplified CSS transition height:
;
Transition height using Jquery:
[pastacode lang=”javascript” manual=”%24(function%20()%20%0A%7B%0A%20%20%20%20%24(%22.paragraph%22).click(function%20()%20%0A%7B%0A%20%20%20%20%20%20%20%20var%20expanded%20%3D%20%24(this).is(%22.expanded%22)%3B%0A%20%20%20%20%20%20%20%20if%20(expanded)%20%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(this).transition(%7B%20’max-height’%3A%20’4em’%2C%20overflow%3A%20’hidden’%20%7D%2C%20500%2C%20’in’%2C%20function%20()%20%7B%24(this).removeClass(%22expanded%22)%3B%20%7D)%3B%0A%20%7D%20%0A%20%20%20%20%20%20%20%20else%20%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(this).transition(%7B%20’max-height’%3A%20%24(this).get(0).scrollHeight%2C%20overflow%3A%20”%7D%2C%20500%2C%20’out’%2C%20function%20()%20%0A%7B%20%24(this).addClass(%22expanded%22)%3B%20%7D)%3B%0A%20%7D%0A%20%20%20%20%7D)%3B%0A%7D)%3B%0A” message=”javascript code” highlight=”” provider=”manual”/];
- Calculate the max height by getting the height of the inner div using JQuery
- This article provides some of the basic informations on width , max height , window height , height , height auto , how to make height , how to height , css overflow , overflow hidden , min height , window height , overflow auto , max height , text overflow , height , the heights , overflow , height auto , how to make height.
