Как сделать плавное изменение высоты?

Question

[Михаил Р.]

Всем привет!

Имеется блок с элементами:

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

Сейчас при добавление нового item высота wrapper резко подстраивается под содержимое.

Вопрос: как сделать плавное увеличение/уменьшение высоты wrapper при изменение в нем содержимого?

Answer 1

[hardcorelite]

<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

[Максим Тимофеев]

Сделать новому item margin-top равный высоте, плавно убирать до 0.

Comments

[Михаил Р.]

А еще варианты есть?

[Максим Тимофеев]

Mike Ro, а чем этот не устраивает?

Answer 3

[Кирилл Горелов]

api.jquery.com/animate
Не справишься, пиши)

Comments

[Михаил Р.]

Про Jq знаю, ищу решение на чистом css.

[Кирилл Горелов]

Mike Ro, Тогда мой вариант тебе не подойдет. Он на jQuery основан.
Увы)