Как сделать анимацию выпадения аккордеона без jQuery?

Question

[Dubrovin]

Как на JS/CSS сделать анимацию раскрывающегося аккордеона (например, impreza.us-themes.com/elements/accordion/)? В jQuery встроены эффекты slideIn/slideOut, которые раскрывают/скрывают любое содержимое. Попытался сделать такое на обычном CSS упёрся в то, что transition на height "криво" работает, если есть внутри маржины/паддинги (при height: 0 и не пустых отступах высота контента будет не нулевой, а если трансформация сразу и на отступы и на высоту - эффект работает "криво", box-sizing border-box не помогает). Плюс проблема с тем, что высота контента может быть разной и если она не задана точно, то анимация вообще работать не будет.
Как такое сделать на ванильном JS? К какому свойству привязаться, чтобы эффект слопывания/раскрытия работал на элементе в не зависимости от того, какой контент лежит внутри? Ну или, возможно, порекомендуете библиотеку для анимации (не сильно тяжёлую), с помощью которой это легко реализовать.

Comments

[Ingernirated]

как же много текста.

height:0px; -> height:200px;
через hover или mouseon
animation: 0.5s;

[Dubrovin]

Ingernirated, внимательно прочитайте, высота контента не фиксированная.

[Ingernirated]

Dubrovin, тогда в %.

[Павел Антонов]

Dubrovin, вы все делали верно только вместо height завязывайтесь на max-height, начальная 0 а конечная например 500px, вам виднее какая высота может быть максимальной в вашем случае, и после все это обрабатываете transition.

А по поводу отступов margin, padding укажите overflow: hidden и должно схлопываться до 0

[Dubrovin]

Павел Антонов, если аккордеон изначально "свёрнут" через display:none, то непонятно как получить максимальную высоту, на которую он может развернуться через js.

[Dubrovin]

Ingernirated, height: 0 -> height: 100% анимация через transient работать не будет, проверьте. Работает только в px, но не понятно как получить высоту контента, если аккордеон "свёрнут".

[Павел Антонов]

Dubrovin, display: none не нужен, можно просто max-height: 0 и overflow: hidden

[Dubrovin]

Павел Антонов, пример можете привести в codepen? пробовал и height и max-height и в процентах и в пикселях - не работает, если высота конкретно не задана точно (а точно задать её через css нельзя, только в js и то не понятно как, если аккордеон свёрнут).

[Павел Антонов]

https://codepen.io/freislot/pen/vRbvYN тут надо вашу верстку и код просить а не мои примеры)) потому что все зависит от конкретного случая

[Dubrovin]

Павел Антонов, предложите любой вариант вёрстки, но высота аккордеона определяется не в CSS, а высотой контента который в нём лежит и вы не можете написать max-height: 500px; - потому что не знаете, какая будет высота у содержимого изначально.

[Павел Антонов]

тогда можно лепить костыли вроде таких,

el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
        height = elem.css("height")
}

клонируем нужный элемент, ставим в конец body выставляем высоту в авто и удаляем клонированный элемент, так можно узнать высоту контента. И потом оперировать полученной высотой.
За вас писать это на чистом js желания нет, я лишь указал варианты решения.

[Dubrovin]

Павел Антонов, да, написать я смогу, только нужно понять как это должно работать. Проблема ещё в том, что если у элемента стоят CSS свойства:

height: 0;
max-height:0;
padding: 30px;
overflow: hidden;
box-sizing: border-box;

то высота не будет равняться нулю, а будет 30px, как это обойти, кроме как запихивать весь контент в обёртку с нулевыми отступами? (jQuery анимации кстати работают с любым содержимым, не важно есть отступы или нет, и не понятно по какому алгоритму).

[Сергей delphinpro]

Вот еще пример https://codepen.io/delphinpro/pen/dWpxjg
Несколько замечаний.
Использован jQuery, но без animate, только операции добавления/удаления классов и стилей. Легко заменяется на ванильный жс.
Использованы CSS переходы, никаких анимаций в самом джаваскрипте. Легко можно менять стиль анимации через тайминг-функцию.
Анимируется свойство max-height, значение которого вычисляется.
Не применяется display:none, что немного упрощает получение реальной высоты блока.

Answer 1

[Dubrovin]

Всё оказалось просто. В закрытом состоянии добавил в css overflow:hidden, height: 0. При этом в JS для получения высоты блока использовал свойство scrollHeight

Answer 2

[tyzberd]

https://codepen.io/mican/pen/wrNjVW

Comments

[Dubrovin]

Я так понимаю в данном примере вся магия в том, что мы рисуем тело аккордеона невидимым, замеряем его высоту и далее оперируем этим значением. Можно ли как-то узнать клиентскую высоту без клонирования ноды?

[tyzberd]

думаю нельзя

[Dubrovin]

tyzberd, оказывается можно :)