Question

I want to control the automatic height change of the container when I add something that changes the lenght of the content. Right now, if I apply a innerHTML change on the content, the height is changed accordingly. I want to apply a transition to that height change. How can I do that? ( I can also use jQuery )

Answer 1

Record the height before changing the content, change the content, record the height after, set the height to the former height, and animate to the latter height. When the animation has completed, set the height to be automatic again. You can do this using height and animate.

Try it on JSFiddle.

var texts = [
    "This is just some sample text that's being used to demonstrate animating the height when content changes.",
    "Shorter."
];

var div = $('div').click(changeContent);

function changeContent() {
    var oldHeight = div.height();
    texts.push(div.text());
    div.text(texts.shift());
    var newHeight = div.height();
    div.height(oldHeight);
    div.animate({height: newHeight}, 'fast', function() {
        div.height('auto');
    });
}

div {
    width: 150px;
    background: lightgray;
    overflow-y: hidden;
}

<div>This is some example content.</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>