Я только что подготовил другое решение для этого, где больше нет необходимости использовать значение от -много до максимального-максимального значения. Для вычисления внутренней высоты свернутого DIV требуется несколько строк кода javascript, но после этого это все CSS.
1) Извлечение и установка высоты
Получить внутреннюю высоту свернутого элемента (используя scrollHeight
). У моего элемента есть класс, .section__accordeon__content
и я фактически запускаю его в forEach()
цикле, чтобы установить высоту для всех панелей, но вы поняли идею.
document.querySelectorAll( '.section__accordeon__content' ).style.cssText = "--accordeon-height: " + accordeonPanel.scrollHeight + "px";
2) Используйте переменную CSS, чтобы развернуть активный элемент
Затем используйте переменную CSS, чтобы установить max-height
значение, когда у элемента есть .active
класс.
.section__accordeon__content.active {
max-height: var(--accordeon-height);
}
Последний пример
Таким образом, полный пример выглядит следующим образом: сначала переберите все панели accordeon и сохраните их scrollHeight
значения в виде переменных CSS. Затем используйте переменную CSS в качествеmax-height
значения активного / расширенного / открытого состояния элемента.
Javascript:
document.querySelectorAll( '.section__accordeon__content' ).forEach(
function( accordeonPanel ) {
accordeonPanel.style.cssText = "--accordeon-height: " + accordeonPanel.scrollHeight + "px";
}
);
CSS:
.section__accordeon__content {
max-height: 0px;
overflow: hidden;
transition: all 425ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
.section__accordeon__content.active {
max-height: var(--accordeon-height);
}
И там у вас есть это. Адаптивная анимация максимальной высоты с использованием только CSS и нескольких строк кода JavaScript (jQuery не требуется).
Надеюсь, что это поможет кому-то в будущем (или моей будущей личности для справки).
.scrollHeight
функция DOM не будет работать в IE <8,0 ( developer.mozilla.org/en/DOM/element.scrollHeight )