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

Question

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

The question is similar to this , but the accepted answer there does not answer the real question, because it does not deal with the problem of calculating the height of the element that you want to shift.

Answer 1

Did you see this demo that I dug up in response? http://jsfiddle.net/XUjAH/6/

I tried to write my own, but didn't seem to work.

Answer 2

You can know the height of an element by duplicating it, setting its height to “auto” and asking what its height is in pixels.

Say it's the div you want to animate onto: <div id="mydiv" style="height:0px"> , use this code to find out its height (just for jQuery simplicity):

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

Answer 3

I use 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 can use a variable for effect duration and attenuation if you use LESS or Sass.
• To trigger the effect, use $('.slide-down').toggleClass('collapsed') .
• If 100px is too small for your container, set a different maximum height using the extra CSS class in the element.
• If you think, try using cubic-bezier(0.17, 0.04, 0.03, 0.94) instead of ease-out .

Answer 4

Check this out: http://jsfiddle.net/gion_13/eNR6Q/ This is just a css3 animation. for use in other browsers, change / add a prefix for a browser with a specific browser: "-moz" for firefox, "-webkit" for chrome and safari, "-o" for opera and "-ms", i.e.