webkit-transition height for a div with a dynamic changing height based on content?

Question

please see the following jsFiddle

http://jsfiddle.net/SgyEW/10/

You can click the various buttons which shows different length content which causes the box to grow/shrink.

I want the height change to be animated so it is not so jumpy, I tried this by adding:

-webkit-transition: all 1s linear;

But that has no effect in this use case. Any ideas in terms of a solution that doesn't require JavaScript?

Thanks

Answer 1

I'm afraid there is no way of animating height with CSS3 transitions without some Javascript assistance, check out:

How can I transition height: 0; to height: auto; using CSS?

Can you use CSS3 to transition from height:0 to the variable height of content?

Additionally, your code goes from display: none to display: block, which wouldn't have an effect on height in any case. Instead of display none use height: 0 with overflow: hidden;

Answer 2

It has been 8 years, but for those who look for the solution to this request:

JS Fiddle

CSS

#box {
border: 1px solid gray;
background-color: #f3f3f3;
-webkit-transition: all 1s linear;
}

.content {display:none}

.new_content {
  transition: 1s;
}

JS

$('.toggler').on('click', function() {

var idname = $(this).attr('name');
var content = $('#' + idname).html();
var content_height = $('#' + idname).height();
$('.new_content').html(content).css("height", content_height);

});

Also, what has been changed:

• You don't use anymore "display: none" and "display: block" as the method you are based on. You prefer to use content replacement of a static shown div
• The content div ('.new_content') doesn't have a height, its optional.
• The JS sets the height based on the hidden div.
• The transition does the job.

Hope it helps.