Мобильная версияПоэтому я установил переход: высота ... в CSS, чтобы анимировать изменения свойства высоты элемента. Однако это работает только тогда, когда у меня явно задана высота, а не 100vh, чтобы просто содержать все элементы.
Чтобы лучше представить это, вот пример: когда зеленый контейнер имеет max-height меньше его фактической высоты (чтобы содержать дочерние элементы), тогда эффект виден и работает. Но тогда я не полагаюсь на автоматическое изменение размера контейнера в соответствии с его дочерними элементами.
Когда я указываю что-то «достаточно большое», чтобы вместить всех возможных дочерних элементов, тогда, конечно, «эффект отскока» " не работает, так как он "подпрыгивает" при достижении "достаточно большой" высоты, в результате чего эффект не виден.
Проблему можно наблюдать, указав другую высоту в фрагменте ниже (3rem или ниже - работает, 4 rem или выше - не работает).
Код: Выделить всё
function expand(){
let dropdown = document.getElementById('dropdown')
let height = dropdown.offsetHeight
let maxHeightInput = document.getElementById('maxHeightInput')
let maxHeight = maxHeightInput?.value ?? 0
dropdown.style.maxHeight = height > 0 ? 0 : maxHeight
}Код: Выделить всё
#dropdown {
background: lightgreen;
max-height: 3rem;
transition: max-height 0.4s cubic-bezier(.04,1.59,.83,1.18);
& > ul {
border: 1px solid black;
}
}Код: Выделить всё
Green container expanded max height
List of items is ~3rems tall.
Expand / collapse
[list]
Item 1
Item 2
Item 3
[/list]
Вопрос в том, как заставить этот эффект подпрыгивания работать в моем сценарии: когда У меня есть контейнер с дочерними элементами, и размер контейнера изменяется динамически в зависимости от его дочерних элементов.
Подробнее здесь: https://stackoverflow.com/questions/793 ... licit-heig
