Возможно ли через transition реализовать плавное раскрытие блока?

Question

[HOPMNC EVER]

Есть блок с меню:

<div class=" container height-none">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

.height-none {
height: 0;
}

На JS реализовано появление блока через переключение класса height-none.

Возможно ли реализовать через transition плавное раскрытие блока, то есть, изменение высоты с 0 до auto?

Answer 1

[Сергей delphinpro]

до авто - нельзя
люди извращаются с max-height

max-height: 0 -> max-height: 500px

Comments

[HOPMNC EVER]

спасибо, получилось реализовать)

Answer 2

[iBird Rose]

можно) но придется поизвращаться с таймаутом в js) https://jsfiddle.net/jh6xcbd7/8/

Comments

[HOPMNC EVER]

Спасибо. Слишком много кода)))

[Сергей delphinpro]

Зачем таймауты? есть событие transitionEnd

[iBird Rose]

Сергей: ну я о нем не знал. но и без него нормально работает.