How can I achieve a slide down effect like jQuery's slideDown, but only using CSS?

There is a problem with CSS3 animations. They do not support the "auto" height property (and width, margins, etc.). What is the best way to create a CSS3 slide down animation without knowing the element's exact height?

The question is similar to this one, but the accepted answer there does not answe开发者_StackOverflow社区r the actual question because they do not deal with the problem of calculating the height of the element you wish to slide.

---

Have you seen this demo I dug up on that answer?
I tried writing my own, but it didn't seem to work.

$('#click-me').click(function() {
  var height = $("#this").height();
  if (height > 0) {
    $('#this').css('height', '0');
  } else {
    $("#this").css({
      'position': 'absolute',
      'visibility': 'hidden',
      'height': 'auto'
    });
    var newHeight = $("#this").height();
    $("#this").css({
      'position': 'static',
      'visibility': 'visible',
      'height': '0'
    });
    $('#this').css('height', newHeight + 'px');
  }
});

#this {
  width: 500px;
  height: 0;
  max-height: 9999px;
  overflow: hidden;
  background: #BBBBBB;
  -webkit-transition: height 1s ease-in-out;
}

#click-me {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>

View on jsFiddle

---

You could know the height of the element by duplicating it, setting its height to "auto" and asking it what its height is in pixels.

Say this is the div you want to animate on: <div id="mydiv" style="height:0px">, use this code to figure out its height (using jQuery for simplicity only):

var divHeight = $("#mydiv").clone().css("height", "auto").height();

---

I am using this:

.slide-down {
  transition: max-height .3s ease-out, opacity .3s ease-out, margin .3s ease-out;
  overflow: hidden;
  max-height: 100px; 

  &.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
  }
}

• You may want to use a variable for the effect duration and easing if you are using LESS or Sass.
• To trigger the effect, use $('.slide-down').toggleClass('collapsed').
• If 100px is too little for your container, set a different max-height using an additional CSS class in the element.
• If you feel fancy, try using cubic-bezier(0.17, 0.04, 0.03, 0.94)instead of ease-out.

---

Check this out : http://jsfiddle.net/gion_13/eNR6Q/ It's just css3 animation. to use in other browsers change/add browser specific vendor css prefixes : "-moz" for firefox, "-webkit" for chrome&safari, "-o" for opera and "-ms" for ie