Плавное изменение высоты блока на CSS

Плавное изменение высоты блока на CSS
Комментарии: 11

Рассмотрим способ решения проблемы сворачивания и разворачивания блока неизвестной высоты на чистом CSS. Это распространённая задача, которая часто вызывает трудности в реализации, когда значение свойства «height» не задано явно, а находится в состоянии «auto».

Для начала посмотрите как работает решение на практике:

Принцип работы

Обычная реализация подразумевает знание начальной и конечной высоты блока. Чтобы обойти это ограничение, будем использовать свойство «max-height». Для свёрнутого значения оно будет нулевым, а для открытого — максимально большим. В нашем случае точно хватит 1000 пикселей.

Стиль блока в раскрытом состоянии:

.expansion-body {
    overflow: hidden;
    max-height: 1000px;
    transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
}

Свёрнутое состояние будет происходить за счёт добавления класса «expansion-hide».

.expansion-hide {
    max-height: 0;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);    
}
  • В развёрнутом виде у «DIV» будет класс «expansion-body».
  • В свёрнутом — «expansion-body expansion-hide».

Плавное сворачивание и разворачивание достигается с помощью нелинейной трансформации максимальной высоты. Значение от 1000 до 0 меняется сначала очень быстро, а потом резко замедляется. Это сглаживает анимацию, если высота блока намного меньше 1000 пикселей. При обычной линейной трансформации при сворачивании была бы задержка.

Описанный способ легко адаптируется для плавного изменения ширины путём применения свойства «max-width».

Добавление класса и возможные проблемы

Для добавления и удаления класса «expansion-hide» в примере использовался чистый JS. Он не влияет на сам процесс анимации. В обработчике «onclick» всего одна строка кода.

document.getElementById('expansion-body').classList.toggle('expansion-hide')

Сама html-разметка также проста:

<div id="expansion-body" class="expansion-body">
    DIV
</div>

Небольшое предупреждение — не добавляйте к блоку отступы «padding», иначе он не будет до конца закрываться. Если они нужны, то создайте внутри ещё один «div» и добавляйте произвольные стили к нему.


PS Чтобы поблагодарить за решение напишите любой комментарий.

Темы:
CSS
Ещё интересное — 6
Комментарии —
  1. Артур
    Артур19 апреля 2022, 00:46#
    Отлично! спасибо большое)
    1. Andy Si22 апреля 2022, 09:10#
      (⌒▽⌒)☆
    2. Алмаз
      Алмаз21 апреля 2022, 19:15#
      Спасибо, очень помогли
      1. Andy Si22 апреля 2022, 09:10#
        (⌒▽⌒)☆
      2. Кирилл
        Кирилл27 мая 2022, 12:47#
        Пытался сделать это через высоту, но ничего не вышло. Огромное вам спасибо, мои мучения окончены
        1. Andy Si27 мая 2022, 14:27#
          Благодарю за обратную связь
        2. Егоров Денис
          Егоров Денис12 марта 2023, 12:53#
          max-height не всегда подходит, если в блоке задан padding. Он и будет все портить. Поэтому используйте JavaScript. А так от кво мастера привет. Такой он квошный)
          1. Andy Si12 марта 2023, 14:28#
            Привет. Всё верно. Про то, что padding в блоке нельзя использовать, написано в конце.
          2. Stas
            Stas14 июня 2024, 18:42#
            Спасибо, очень выручили
            1. Andy Si17 июня 2024, 10:40#
              Отлично, сам пользуюсь часто
            2. Nikita
              Nikita04 июля 2024, 03:53#
              Спасибо! Долго мучился с этим. Очень выручили
              © REALADMIN.RU   2024 г.
              Страница сгенерирована: 0,1964 s | 4 mb.
              На каком уровне Вы играете в шахматы?
              OPROS