🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
#фишка дня
Аккордионы и прочие схлопывающиеся сценарии. Скажи, как ты их анимируешь, и я скажу, кто ты.
Если ты их до сих пор анимируешь через max-height, скорее всего, ты — LLM-ка, которая застряла где-то там.
Ну буквально, только что сессию демонстрационную проводил.
Согласен, height ещё плохо анимируется в auto, хоть и появился interpolate-size. Но ведь гриды никто у нас не отбирал!
Да-да, давненько я не напоминал, что гриды прекрасно анимируются и что уже давно не нужны извращения. Но сегодня я пришёл с маленьким дополнением.
Все же в курсе, что классика — одна строка грида и 0fr ↔ 1fr?
.accordion-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.28s ease;
}
.accordion-panel[data-open="true"] {
grid-template-rows: 1fr;
}
.panel-inner {
overflow: hidden;
min-height: 0;
}
Внутренний блок клипится — высота анимируется без max-height: 9999px.
А вот дополнение: в grid-template-rows можно и пиксели, и minmax(). Например, свёрнуто, но кусочек текста виден:
grid-template-rows: minmax(48px, 0fr); /* закрыто */
grid-template-rows: minmax(48px, 1fr); /* открыто */
Демонстрация: Ссылка скрыта
Первый аргумент в minmax — минимум, не максимум: 48px снизу, а не «не больше 48». Полное скрытие — по-прежнему 0fr.
И да: padding на clip-слой не вешайте — только внутрь контента, иначе и под 0fr торчит, и при открытии прыгает.
#css #grid #accordion
