Как анимировать элемент «details» с помощью WAAPI

[ivan386]

Зачем использовать Javascript там где может справиться CSS?

details summary ~ div{
overflow: hidden;
}
details[open] summary ~ div{ 
animation: sweep 2s ease-in-out;
}
@keyframes sweep {
0%    {max-height:0;}
100%  {max-height:2000px;}
}

Из комментариев к статье "Аккордеон, faq, спойлер и другие раскрывающиеся виджеты"

[Max_JK]

вот только это решение довольно грязное, если контент больше 2000px то он обрежется, если меньше, то будет задержка при сворачивании
(например если высота блока = 50px то нужно ждать пока transition пробежит 1950px, и только тогда появится видимая анимация, и при том длится она будет только 0.05 секунд вместо заданных 2 секунд),

пока что css не может предложить идеального решения

[ivan386]

если контент больше 2000px то он обрежется

Ответ автора:

Если использовать animation, то max-height ставится и снимается во время анимации.

Соответственно элемент будет развёрнут до полного своего размера.

если меньше, то будет задержка при сворачивании

Можно перераспределить скорость выполнения анимации по времени так чтобы большая часть времени анимации приходилась на её завершение. Используется для этого animation-time-function.