Как плавно увеличить высоту элемента в который вставляется какой либо контент?

Question

[Makito]

Доброе утро всем.
В блок с помощью js происходит вставка некоего контента, высота блока неизвестна, высота вставляемого контента тоже неизвестна.
Как заставить блок увеличивать высоту не рывком а плавно?
Пробовал задавать контейнеру такие стили:
transition: all 1s ease-in-out;
но это не помогает.
Вот пример сделал на кодепен, тамм видно что блок увеличивает высоту рывками.

Answer 1

[nikfakel]

var a = $('#container').height(); 
$('#container').height(a); 
$('#container').append('<div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatasd.incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatasd Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatasd</div>');
var b = $('.block').height() + 10; // 10 равен padding. Можно тоже автоматом получать
$('#container').animate({'height':b},1000);

Примерно что-то такое. Конкретно это не очень удачный пример, надо настраивать именно под ваш проект, но работает в целом.

Comments

[Makito]

Да вот не хотел анимировать с помощью jquery animate, хотелось бы средствами css обойтись.