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

user_485680 0
Viewed 27129

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

transitions webkit css
2 Answers

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.

user_118361330
Related