/ 

Анимируем высоту c auto в CSS через transition

Пытались ли вы анимировать высоту (height) через CSS? Если пытались, то скорее всего вы знаете, что через transition можно задать анимацию от одного значения, до другого. И в этом есть небольшая проблема, что делать если нам нужно заанимировать высоту со значения auto до 0? К сожалению просто указать свойство transition не даст нам никакого эффекта. Но не спешите расстраиваться, это можно сделать не прибегая к помощи JavaScript.

Так как же это сделать?

Казалось бы, безвыходная ситуация, но это не так. Мы забыли про еще одно свойство, которое может нам в этом помочь. И это свойство max-height. Если вы уже догадались что делать дальше, отложите чтение этой стати и попробуйте реализовать анимацию сами. А потом возвращайтесь и сравните ваше решение с моим.

Чтобы все получилось, нужно сделать несколько шагов:

  1. Задать достаточно большую максимальную высоту, чтобы в дальнейшем анимировать её до нужных нам размеров;
  2. Установить overflow: hidden, чтобы содержимое скрывалось при анимации;
  3. Помнить про padding, а именно про то, что если он есть, то его тоже нужно будет анимировать до 0, чтобы наш блок полностью исчез;

Анимация высоты с 0 до auto

Демо можно посмотреть тут.
Теперь мы умеем анимировать высоту через CSS. И теперь можем делать без javascript такие штуки, как: спойлеры, выпадающие меню, раскрывающиеся попапы и т.д.

⌘ ⌘ ⌘
Поделиться
Отправить
Фронтенд

Определяем язык страницы в CSS

Через псевдокласс О_о

Фронтенд

Фронтенд дайджест #2 — БЭМ, CSS матрицы, SVG логотипы, Vivaldi, Bootstrap, Canvas

Дайджест ссылок для разработчиков интерфейсов и frontend разработчиков. 3D прогресс бар, БЭМ, CSS матрицы, SVG логотипы, Vivaldi, Bootstrap, Canvas, шпаргалка, Electron...

Как называть переменные
Фронтенд

Как называть переменные

Мой взгляд на соглашения наименования переменных, функций, методов и классов

Плавный, нативный скрол
Фронтенд

Плавный, нативный скрол

Выкиньте лишние библиотеки для прокрутки внутри страницы