Есть некий div id="container"
в котором находится неизвестное количество контента. Например может быть 1 вложенный div
а может быть 10. Свойства контейнера когда он скрыт :
#container{
max-height: 0;
transition: all 0.5s ease-out;
overflow: hidden;
}
Далее мне нужно его плавно развернуть :
#element:checked ~ #container{
max-height: 500px;
transition: all 0.5s ease-in;
}
Все нормально работает, но только пока max-height
равно 500 или другое точное значение. Если выставить auto
то высота не меняется вообще. Похожий вопрос уже был тут но ответ подразумевает знание точной высоты div #container
а как быть если высота должна быть auto
?
#container {
max-height: 0;
transition: all 0.5s ease-out;
overflow: hidden;
}
#element:checked ~ #container{
max-height: 300px;
transition: all 0.5s ease-in;
}
<div id="wrapp">
<input type="checkbox" id="element"/>
<div id="container">
<div>
<span>text</span>
</div>
<div>
<span>text</span>
</div>
<div>
<span>text</span>
</div>
</div>
</div>
input
должен быть виден, остальное нет – Сергей 10 июл '19 в 22:21100%
и увидишь что понимает, только переход резкий. – Сергей 10 июл '19 в 22:44