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

 

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

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

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

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

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

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

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

Комментарии

Read more!

Меню

Последние заметки

Копирайт

© Юрий Матюхин, 2013 — 2017
Эл. почта: ym@ymatuhin.ru, твиттер: @ymatuhin

CSS animation animate transitions height высота анимация анимируем 0 auto авто