2021-04-26 15:16:20
#заметка дня
Во времена расцвета jQuery реализация аккордеона — набора раскрывающихся блоков — укладывалась в метод slideToggle. Одна-две строчки – и готово.
Сейчас же jQuery не в почёте, а CSS Transitions не дают нам возможности анимировать высоту от 0 до auto. Браузеру не известна высота блока до того, как блок будет отображён. Так какой же выход из ситуации?
Чтобы это понять, надо сначала осознать, как когда-то с этим справлялась jQuery.
А она
всего лишь производила кучу вычислений прямо перед вашими глазами: показывала блок, рассчитывала высоту контента, сохраняла, ставила в ноль и изменяла значение высоты блока используя заданную функцию плавности.
Комбинируя это знание с тем фактом, что CSS не может анимировать высоту до auto, в голову сразу приходит несколько решений.
1. Установка transition на max-height, вместо height. От 0 до абсурдно большого значения. Плюсы — можно вообще JS не писать. Минусы — если сильно ошибся с предполагаемой высотой, функция плавности сойдёт с ума.
2. Считать scrollHeight и анимировать до него. Собственно, фактически то же самое, что делал jQuery. Плюсы: полный контроль над происходящим Минусы: без JS работать не будет (в самом популярном случае вы просто оставляете аккордеон раскрытым).
3. Ну мы же в 2021 году, есть пользовательские свойства! Устанавливаем значение свойства равным высоте scrollHeight, как во втором случае, и дело в шляпе: https://codepen.io/alinaki/pen/OJWqXGV Плюсы: минимальный объём кода, минусы — поддержка пользовательских свойств в вашем таргете может отсутствовать. Зато если поддержки нет или JS выключен — анимации просто не будет.
А чтобы всё это было доступно с клавиатуры — не забываем применить технику «визуального скрытия (visually hidden)» на чекбоксы и установить лейблу стили для фокуса.
#css #customproperties #accordion
2.4K viewsedited 12:16
Б
