How to make a smooth change in height?

Question

css

Hello!
There is a block with elements:

<div class="wrapper">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

Now when you add a new itemheight wrappersharply adjusts to the content.
Question: how to make a smooth increase / decrease in height wrapperwhen the content changes in it?

Answer 1

<div class="wrapper">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>
        <a id="clickme" href="#">click</a>

.wrapper {
    margin:20px;
    background-color:#fff;
    padding:15px;
}

.bubble{
    animation: animateElement linear .3s;
    animation-iteration-count: 1;
    background:#e7e7e7;
    margin-bottom:5px;
    width:100%;
    min-height:30px;
    border-radius:10px;
}

@keyframes animateElement{
    0% {
        opacity:0;
        transform:  translate(0px,10px);
    }
    100% {
        opacity:1;
        transform:  translate(0px,0px);
    }
}

$('#clickme').click(function() {
                    var newElement = $('<div class="item">item</div>');
                    $('.wrapper').append(newElement);
        });

Answer 2

Make the new item's margin-top equal to the height, smoothly remove to 0.

Answer 3

api.jquery.com/animate
_