How to animate a width:auto div when new text is added to it in css3?

Question

I have given a div this code

min-width: 200px;
width: auto;
transition: all 2s;
-webkit-transition: all 2s;

When I add more text to this div with jQuery append, why does the div not animate to the new height?

Is this possible in css3?

This is an absolute div, that may make a difference

Answer 1

I think the problem is, that the height-property is set to 'auto' and it stays on 'auto'. So there is no transition from one state to another. Maybe you have to set an absolute height and add some pixels to the css height-property with every appended text.

Answer 2

CSS3 transitions can only be enabled on height for "length, percentage, or calc" values . If you want to do this in CSS3, you'll need to explicitly set or calculate a height. Otherwise, you'll want to use jQuery to animate it doing something like:

var old = $el.css('height');
$el.css('height', '');
$el.append('text');
var newH = $el.innerHeight();
$el.css('height', old);
if(old != newH)
    $el.animate({'height': newH}, 'fast');

Answer 3

I am not sure how to do this in css3, but I have an example done in jQuery.

http://jsfiddle.net/T5aEw/1/

To get it to slide when you append, you should first make the appened item hidden with display:block then call .slideDown on the last element added.

Answer 4

var myStr= 'text to append '; //parameters can be in ms.

$(myStr).appendTo('#containerDiv').slideDown('slow'); // it will now work.