• 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?

max height code 
#child0 
{
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
#parent0:hover #child0 
{
    height: auto;
#child40 
{
    height: 40px;
    overflow: hidden;
    background-color: #dedede;
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
}
#parent40:hover #child40 
{
    height: auto;
}
h1 
{
    font-weight: bold;
}
  • The only difference between the two snippets of CSS is one has height: 0, the other height: 40.
max height code 
<hr />
<div id="parent0">
    <h1>Hover me (height: 0)</h1>
    <div id="child0">Some content
        <br />Some content
        <br />Some content
        <br />Some content
        <br />Some content
        <br />Some content
        <br /></div></div>
<hr />
<div id="parent40">
    <h1>Hover me (height: 40)</h1>
    <div id="child40">Some content
        <br />Some content
        <br />Some content
        <br />Some content
        <br />Some content
        <br />Some content
        <br />
    </div>
</div>

  • Use max-height in the transformation and not height. And set a value on max-height
css code 
#menu #list 
{
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
    background: #d5d5d5;
}
#menu:hover #list 
{
    max-height: 400px;
    transition: max-height 0.25s ease-in;
}
<div id="menu">
    <a>hover me</a>
    <ul id="list">
        <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

  • Use max-height with different transition
  • HTML
text overflow code 
<a href="#" id="trigger">Hover</a>
<ul id="toggled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
<ul>
  • CSS
css overflow code 
#toggled
{
    max-height: 0px;
    transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}
#trigger:hover + #toggled
{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0); 
    transition-delay: 0s;
}
[ad type=”banner”]

;

  • Using relative positioning and works on li elements, & is pure CSS
  • CSS
height auto code 
wrap 
{ 
overflow:hidden; 
}
.inner 
{
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}
inner.open 
{ margin-top:0px; 
}
  • HTML
height auto code 
<div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>

;

  • Transition from height:0 to height:auto
window height code 
div.stretchy
{
    transition: 1s linear;
}
div.stretchy.hidden
{
    height: 1;
}
div.stretchy.visible
{
    height: auto;
    min-height:40px;
    max-height:400px;
}
[ad type=”banner”]

;

  • transition max height value:
window height code 
.sidemenu li ul 
{
   max-height: 0px;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   -ms-transition: all .3s ease;
   transition: all .3s ease;
}
.sidemenu li:hover ul 
{
    max-height: 500px;
    -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease;
}

;

  • Set the height to auto and transition the max-height.
max height css code 
div 
{
  position: absolute;
  width:100%;
  bottom:1px;
  left:0px;
 background:#111;
  color: #FFF;
  max-height:100%; /**/
  height:auto; /**/

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.close 
{
  max-height:0%; /**/
}

;

  • A visual workaround to animating height using CSS3 transitions is to animate the padding instead, and to set explicitly height/max-height
max height css code 
div 
{
    height: 0;
    overflow: hidden;
    padding: 0 18px;
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
            transition: all .5s ease;
}
div.animated 
{
    height: auto;
    padding: 24px 18px;
}

;

  • Simplified CSS transition height:
height and width code 
.our_content 
{
	/* Initially we don't want any height, and we want the contents to be hidden */
	max-height: 0;
	overflow: hidden;

	/* Set our transitions up. */
	-webkit-transition: max-height 0.8s;
	-moz-transition: max-height 0.8s;
	transition: max-height 0.8s;
}
.outside_box:hover .our_content 
{
	/* On hover, set the max-height to something large. In this case there's an obvious limit. */
	max-height: 200px;
}
[ad type=”banner”]

;

Transition height using Jquery:

javascript code 
$(function () 
{
    $(".paragraph").click(function () 
{
        var expanded = $(this).is(".expanded");
        if (expanded) 
{
            $(this).transition({ 'max-height': '4em', overflow: 'hidden' }, 500, 'in', function () {$(this).removeClass("expanded"); });
 } 
        else 
{
            $(this).transition({ 'max-height': $(this).get(0).scrollHeight, overflow: ''}, 500, 'out', function () 
{ $(this).addClass("expanded"); });
 }
    });
});

;

  • Calculate the max height by getting the height of the inner div using JQuery
javascript 
$('button').bind('click', function(e) { 
  e.preventDefault();
  w = $('#outer');
  if (w.hasClass('collapsed')) {
    w.css({ "max-height": $('#inner').outerHeight() + 'px' });
  } else {
    w.css({ "max-height": "0px" });
  }
  w.toggleClass('collapsed');
});
  • 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.

Categorized in:

CSSHTML

Tagged in:

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,