Аккордионы и прочие схлопывающиеся сценарии. Скажи, как ты их анимируешь, и я скажу, кто ты.
Если ты их до сих пор анимируешь через
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); /* открыто */
Демонстрация: https://codepen.io/alinaki/pen/QwGryqN
Первый аргумент в minmax — минимум, не максимум:
48px снизу, а не «не больше 48». Полное скрытие — по-прежнему 0fr.И да: padding на clip-слой не вешайте — только внутрь контента, иначе и под
0fr торчит, и при открытии прыгает.#css #grid #accordion