Как сделать плавно раскрывающийся список? Число элементов в списке может быть любым, то есть высота должна плавно измениться от 0 до auto.
Чат GPT(telegram-версия) эту задачу не решил. Все его решения содержали либо фикс.высоты, либо max-height в пикселях, но у нас неизвестен размер раскрывающегося блока и мы не можем задать max-height: <число>
При помощи библиотеки gsap решение выглядит так:
if (container.classList.contains('how-to-use--open')) {
gsap.to(".how-to-use__down", {
duration: 0.4,
height: 'auto',
})
return 0;
}
gsap.to(".how-to-use__down", {
duration: 0.4,
height: 0,
})❗️Обратите внимание, что значение auto взято в кавычки, без этого не будет работать. Так же не забудьте добавить duration.
Также смотрите в codepen стрелки на css с анимацией поворота
🔗Ссылка на codepen
#js #gsap #animation