PROBLEM
When we try to make a <ul> slide down using CSS transitions.
The <ul> 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.
[pastacode lang=”markup” manual=”%3Chr%20%2F%3E%0A%3Cdiv%20id%3D%22parent0%22%3E%0A%20%20%20%20%3Ch1%3EHover%20me%20(height%3A%200)%3C%2Fh1%3E%0A%20%20%20%20%3Cdiv%20id%3D%22child0%22%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%0A%3Chr%20%2F%3E%0A%3Cdiv%20id%3D%22parent40%22%3E%0A%20%20%20%20%3Ch1%3EHover%20me%20(height%3A%2040)%3C%2Fh1%3E%0A%20%20%20%20%3Cdiv%20id%3D%22child40%22%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3ESome%20content%0A%20%20%20%20%20%20%20%20%3Cbr%20%2F%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%3C%2Fdiv%3E” message=”max height code” highlight=”” provider=”manual”/]
SOLUTION 1:
Use max-height in the transformation and not height. And set a value on max-height
[pastacode lang=”css” manual=”%23menu%20%23list%20%0A%7B%0A%20%20%20%20max-height%3A%200%3B%0A%20%20%20%20transition%3A%20max-height%200.15s%20ease-out%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20background%3A%20%23d5d5d5%3B%0A%7D%0A%23menu%3Ahover%20%23list%20%0A%7B%0A%20%20%20%20max-height%3A%20400px%3B%0A%20%20%20%20transition%3A%20max-height%200.25s%20ease-in%3B%0A%7D%0A%3Cdiv%20id%3D%22menu%22%3E%0A%20%20%20%20%3Ca%3Ehover%20me%3C%2Fa%3E%0A%20%20%20%20%3Cul%20id%3D%22list%22%3E%0A%20%20%20%20%20%20%20%20%3C!–%20Create%20a%20bunch%2C%20or%20not%20a%20bunch%2C%20of%20li’s%20to%20see%20the%20timing.%20–%3E%0A%20%20%20%20%20%20%20%20%3Cli%3Eitem%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3Eitem%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3Eitem%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3Eitem%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3Eitem%3C%2Fli%3E%0A%20%20%20%20%3C%2Ful%3E%0A%3C%2Fdiv%3E%0A” message=”css code” highlight=”” provider=”manual”/]
SOLUTION 2:
Use max-height with different transition
[pastacode lang=”markup” manual=”%3Ca%20href%3D%22%23%22%20id%3D%22trigger%22%3EHover%3C%2Fa%3E%0A%3Cul%20id%3D%22toggled%22%3E%0A%20%20%20%20%3Cli%3EOne%3C%2Fli%3E%0A%20%20%20%20%3Cli%3ETwo%3C%2Fli%3E%0A%20%20%20%20%3Cli%3EThree%3C%2Fli%3E%0A%3Cul%3E%0A” message=”text overflow code” highlight=”” provider=”manual”/]
[pastacode lang=”css” manual=”%23toggled%0A%7B%0A%20%20%20%20max-height%3A%200px%3B%0A%20%20%20%20transition%3A%20max-height%20.8s%20cubic-bezier(0%2C%201%2C%200%2C%201)%20-.1s%3B%0A%7D%0A%23trigger%3Ahover%20%2B%20%23toggled%0A%7B%0A%20%20%20%20max-height%3A%209999px%3B%0A%20%20%20%20transition-timing-function%3A%20cubic-bezier(0.5%2C%200%2C%201%2C%200)%3B%20%0A%20%20%20%20transition-delay%3A%200s%3B%0A%7D%0A” message=”css overflow code” highlight=”” provider=”manual”/]
[ad type=”banner”]
SOLUTION 3: ;
Using relative positioning and works on li elements, & is pure CSS
[pastacode lang=”css” manual=”wrap%20%0A%7B%20%0Aoverflow%3Ahidden%3B%20%0A%7D%0A.inner%20%0A%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-top%3A-100%25%3B%0A%20%20%20%20-webkit-transition%3Amargin-top%20500ms%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3Amargin-top%20500ms%3B%0A%7D%0Ainner.open%20%0A%7B%20margin-top%3A0px%3B%20%0A%7D%0A” message=”height auto code” highlight=”” provider=”manual”/]
[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%22wrap%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22inner%22%3ESome%20Cool%20Content%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A” message=”height auto code” highlight=”” provider=”manual”/]
SOLUTION 4: ;
Transition from height:0 to height:auto
[pastacode lang=”css” manual=”div.stretchy%0A%7B%0A%20%20%20%20transition%3A%201s%20linear%3B%0A%7D%0Adiv.stretchy.hidden%0A%7B%0A%20%20%20%20height%3A%201%3B%0A%7D%0Adiv.stretchy.visible%0A%7B%0A%20%20%20%20height%3A%20auto%3B%0A%20%20%20%20min-height%3A40px%3B%0A%20%20%20%20max-height%3A400px%3B%0A%7D%0A” message=”window height code” highlight=”” provider=”manual”/]
[ad type=”banner”]
SOLUTION 5: ;
transition max height value:
[pastacode lang=”css” manual=”.sidemenu%20li%20ul%20%0A%7B%0A%20%20%20max-height%3A%200px%3B%0A%20%20%20-webkit-transition%3A%20all%20.3s%20ease%3B%0A%20%20%20-moz-transition%3A%20all%20.3s%20ease%3B%0A%20%20%20-o-transition%3A%20all%20.3s%20ease%3B%0A%20%20%20-ms-transition%3A%20all%20.3s%20ease%3B%0A%20%20%20transition%3A%20all%20.3s%20ease%3B%0A%7D%0A.sidemenu%20li%3Ahover%20ul%20%0A%7B%0A%20%20%20%20max-height%3A%20500px%3B%0A%20%20%20%20-webkit-transition%3A%20all%201s%20ease%3B%0A%20%20%20-moz-transition%3A%20all%201s%20ease%3B%0A%20%20%20-o-transition%3A%20all%201s%20ease%3B%0A%20%20%20-ms-transition%3A%20all%201s%20ease%3B%0A%20%20%20transition%3A%20all%201s%20ease%3B%0A%7D%0A” message=”window height code” highlight=”” provider=”manual”/]
SOLUTION 6: ;
Set the height to auto and transition the max-height.
[pastacode lang=”css” manual=”div%20%0A%7B%0A%20%20position%3A%20absolute%3B%0A%20%20width%3A100%25%3B%0A%20%20bottom%3A1px%3B%0A%20%20left%3A0px%3B%0A%20background%3A%23111%3B%0A%20%20color%3A%20%23FFF%3B%0A%20%20max-height%3A100%25%3B%20%2F**%2F%0A%20%20height%3Aauto%3B%20%2F**%2F%0A%0A%20%20-webkit-transition%3A%20all%200.2s%20ease-in-out%3B%0A%20%20-moz-transition%3A%20all%200.2s%20ease-in-out%3B%0A%20%20-o-transition%3A%20all%200.2s%20ease-in-out%3B%0A%20%20-ms-transition%3A%20all%200.2s%20ease-in-out%3B%0A%20%20transition%3A%20all%200.2s%20ease-in-out%3B%0A%7D%0A.close%20%0A%7B%0A%20%20max-height%3A0%25%3B%20%2F**%2F%0A%7D%0A” message=”max height css code” highlight=”” provider=”manual”/]
SOLUTION 7: ;
A visual workaround to animating height using CSS3 transitions is to animate the padding instead, and to set explicitly height/max-height
[pastacode lang=”css” manual=”div%20%0A%7B%0A%20%20%20%20height%3A%200%3B%0A%20%20%20%20overflow%3A%20hidden%3B%0A%20%20%20%20padding%3A%200%2018px%3B%0A%20%20%20%20-webkit-transition%3A%20all%20.5s%20ease%3B%0A%20%20%20%20%20%20%20-moz-transition%3A%20all%20.5s%20ease%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20transition%3A%20all%20.5s%20ease%3B%0A%7D%0Adiv.animated%20%0A%7B%0A%20%20%20%20height%3A%20auto%3B%0A%20%20%20%20padding%3A%2024px%2018px%3B%0A%7D%0A” message=”max height css code” highlight=”” provider=”manual”/]
SOLUTION 8: ;
Simplified CSS transition height:
[pastacode lang=”css” manual=”.our_content%20%0A%7B%0A%09%2F*%20Initially%20we%20don’t%20want%20any%20height%2C%20and%20we%20want%20the%20contents%20to%20be%20hidden%20*%2F%0A%09max-height%3A%200%3B%0A%09overflow%3A%20hidden%3B%0A%0A%09%2F*%20Set%20our%20transitions%20up.%20*%2F%0A%09-webkit-transition%3A%20max-height%200.8s%3B%0A%09-moz-transition%3A%20max-height%200.8s%3B%0A%09transition%3A%20max-height%200.8s%3B%0A%7D%0A.outside_box%3Ahover%20.our_content%20%0A%7B%0A%09%2F*%20On%20hover%2C%20set%20the%20max-height%20to%20something%20large.%20In%20this%20case%20there’s%20an%20obvious%20limit.%20*%2F%0A%09max-height%3A%20200px%3B%0A%7D%0A” message=”height and width code” highlight=”” provider=”manual”/]
[ad type=”banner”]
SOLUTION 9: ;
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”/]
SOLUTION 10: ;
Calculate the max height by getting the height of the inner div using JQuery
[pastacode lang=”javascript” manual=”%24(‘button’).bind(‘click’%2C%20function(e)%20%7B%20%0A%20%20e.preventDefault()%3B%0A%20%20w%20%3D%20%24(‘%23outer’)%3B%0A%20%20if%20(w.hasClass(‘collapsed’))%20%7B%0A%20%20%20%20w.css(%7B%20%22max-height%22%3A%20%24(‘%23inner’).outerHeight()%20%2B%20’px’%20%7D)%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20w.css(%7B%20%22max-height%22%3A%20%220px%22%20%7D)%3B%0A%20%20%7D%0A%20%20w.toggleClass(‘collapsed’)%3B%0A%7D)%3B%0A” message=”javascript” highlight=”” provider=”manual”/]
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.