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

Question

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 answer the actual question because they do not deal with the problem of calculating the height of the element you wish to slide.

Dentilabial

I'm not sure if you're asking exactly the same thing, but take a look at this: #5073026 – Crocus

@thirtydot, there is no proper solution to the problem there. The only solution close to the auto height slide problem is using a line-height animation, which looks bad, and it's only compatible with text. – Dentilabial

@thirtydot, Also, the accepted answer there does not actually solve the problem. – Dentilabial

I agree with @Ron. You'll have to calculate the height of the element and adjust the animation accordingly. – Macleod

@Neurofluxation But how do I calculate the height dynamically? I want a working slideDown replacement, and it's pretty damn strange I actually need to write one myself. – Dentilabial

@Ron: Have you seen this: jsfiddle.net/XUjAH/6 – Pelag

Yea, looks good @Blender, why don't you post it as an answer so I can accept it? Although I still with it was an actual slideDown replacement... – Dentilabial

Answer 1

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

Pelag

I wish there was a more solid solution, perhaps some jQuery plugin like this: github.com/benbarnett/jQuery-Animate-Enhanced – Dentilabial

So, what's wrong with that plugin? slideDown is just animate({height: 'toggle'});. – Pelag

here's a mail from Ben, its author: Hey Sadly, I had to write a function to avoid accelerating these transitions as it was causing some weird display issues. If you have a look at this function: _isBoxShortcut() on line 354: github.com/benbarnett/jQuery-Animate-Enhanced/blob/master/… I'd love to find a way to get them to work. If you want to have a play around, just make that function 'return false' and then the plugin will convert all slideDown, SlideUp and slideToggle shortcuts to CSS3 animations. – Dentilabial

Answer 2

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();

Pallbearer

Hey @dutzi, why do you need to clone it? Why not just set auto height and measure it's height? – Dentilabial

Because some browsers might try to render the element in its "new" height before you change it back, causing it to flicker. You could change its "display" to "none" before, though... – Pallbearer

Answer 3

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.

Burkhart

Answer 4

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

Lingerie

not a good answer, since it does not deal with auto height. thanks though – Dentilabial