Как анимировать display?

Question

[pegas]

Я понимаю что display не анимируется, но height то анимируется. Как объединить эти два свойства вместе? Стоит задача плавно раскрыть скрытый элемент. Да знаю можно сделать visibility: hidden, но хочется чтобы лишний блок не нагружал браузер и не появлялся до своего момента. https://jsfiddle.net/2ds6ke41/

Answer 1

[Nwton]

https://jsfiddle.net/2ds6ke41/8/
Но если ты не знаешь height блока заранее, то либо костыль в виде max height 1000px, либо, верный вариант - js

Comments

[pegas]

Для обратной анимации вторую делать придётся?

[Nwton]

для обратной только js. Но если не хотите js, тогда придется отказаться от display block и установить animation hide в дефолтный класс: https://jsfiddle.net/2ds6ke41/17/

[pegas]

Nwton: почему именно max height можно и просто height без макс

[Nwton]

Артём: оу, это я по привычке. max, если внутри еще есть блок, по которому родитель будет растягиваться. Только в такому случае еще нужен overflow hidden родителю

[pegas]

Nwton: Хотя если убрать макс то анимация при перезагрузке сразу действует

[Nwton]

Артём: с hide нельзя убирать max, иначе анимация начнется не с текущего height, а с установленного

Answer 2

[lnked]

Так с jQuery