Как сделать высоту перехода от 0 до автоматической с помощью CSS?

В этой статье мы собираемся обсудить, как мы можем выполнить переход от «высоты: 0;» на «высота: авто;» с помощью CSS.

Проблема с прямым переходом в height:auto в том, что перехода нет, и он меняется оперативно. Вместо этого нам нужен переход, при котором элемент или контейнер будет менять свою высоту.

Подход: замените высоту на максимальную высоту, чтобы высота контейнера не превышала фактический размер контейнера или коробки, и он действительно работал как автоматический. Во-вторых, мы устанавливаем послепереход на «авто», вместо этого мы должны установить его на значение, которого контейнер или коробка никогда не достигнут.

Используемые свойства CSS:

• max-height: Это свойство используется для установки максимальной высоты элемента. Это сохраняет значение свойства height от превышения максимальной высоты.
• переходы: это свойство используется для медленного и плавного внедрения изменений. Мы также можем установить продолжительность, в течение которой изменение будет происходить медленно.

Пример 1: вышеприведенный подход демонстрируется приведенным ниже кодом, где мы можем видеть, как мы можем переключать видимость списка с помощью перехода:

Выход:

Пример 2: В этом примере мы можем видеть, как мы используем одну и ту же технику для нескольких контейнеров одновременно, и мы можем видеть, как блоки смещают содержимое ниже до места, которое занимает содержимое в контейнере.

Выход: