Как анимировать увеличение блока?

Question

[enchikiben]

Есть div у него динамическое содержимое, подскажите как сделать так чтобы он не дергался по высоте, а анимированно увеличивался по высоте?

тест тут: https://jsfiddle.net/fhbg3wru/

Answer 1

[Андрей Б.]

.selector {
	transition: all 0.6s;
}

// или только высота
.selector {
	transition: height 0.6s;
}

Comments

[enchikiben]

не получается https://jsfiddle.net/fhbg3wru/ или я что то делаю не так

[Андрей Б.]

https://jsfiddle.net/50sjs2eh/ только в таком случае обязательно указать стартовую высоту, до момента добавления текста, я в качестве примера поставил 18px

Answer 2

[Sn0wSky]

С динамическим контентом - Вам нужно текущий блок сделать фиксированной высоты с overflow: hidden и поставить анимацию на изменению высоты.
Далее при изменении контента создаете скрытую копию этого блока, засовываете в него весь контент, замеряете высоту и выставляете на Ваш основной блок.

Answer 3

[GreatRash]

https://jsfiddle.net/4oxvejst/

Answer 4

[display: block]

Задать transition, чтобы изменения остальных свойств проходили за заданное время.