Animation for the automatic height change when content is resized with javascript

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

Based on icktoofay's answer.

I make the button disabled while changing the height and add a fading effect. This solution is useful for updating of the products filter and so on.

Also I check the box-sizing property. If it's box-sizing then I get newHeight by .outerHeigth() instead of .height() to prevent the height fluctuation when new content has the same height. You can check this situation, for example by setting the random variable to value 5. The reason is that

.height() will always return the content height, regardless of the value of the CSS box-sizing property.

CodePen

$('#button').click(function() {
  var $button = $(this),
      buttonOriginalText = $button.html();
  $button.prop('disabled', true).html('Updating...');
  $('#content').animate({
    opacity: 0
  }, 'fast', function() {
    var newHeight,
        $content = $(this),
        oldHeight = $content.height();
    $content.html(getRandomContent());
    newHeight = ('border-box' === $content.css('box-sizing') ? $content.outerHeight() : $content.height());
    $content.height(oldHeight).animate({
      height: newHeight,
      opacity: 1
    }, 'slow', function() {
      $content.height('auto');
      $button.prop('disabled', false).html(buttonOriginalText);
    });
  });
});

function getRandomContent() {
  var random = 1 + Math.round(Math.random() * 11), // 1..12
      paragraph = '<p>Paragraph</p>';
  return paragraph.repeat(random);
}

* {
  box-sizing: border-box;  /* comment out to test "content-box" */
  font: 16px Helvetica, 'sans-serif';
}

.content {
  counter-reset: content;
  padding: 6px 18px;
}

.content p {
  counter-increment: content;
}

.content p:after {
  content: ' ' counter(content) '.';
}

.content-box {
  border: 2px solid red;
  margin-top: 24px;
  max-width: 220px;
}

<button id="button" class="button">Update the content</button>
<div class="content-box">
  <div id="content" class="content">Animatie the automatic height when content is resized.</div>
</div>

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

Answer 2

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>

Answer 3

<div id="containter" style="overflow:hidden">
<div>
 Content.....
</div>
</div>

//add something...
$('#container').animate({height:$('#container').content().outerHeight()});

or:

 $('#container').animate({height:$('#container').children().first().outerHeight()});

and when adding append to the div inside the containter:

$('#container').children().first().append(somethingNew);