Css smooth height transition

Плавные трансформации на чистом CSS. Свойство transition

CSS-свойство transition служит для создания плавных переходов между двумя состояниями элемента. Оно помогает избежать резких и нежелательных изменений, делая анимацию более естественной и приятной для глаз.

Свойство в общем виде записывается так:

transition: property duration timing-function delay; 

• property — определяет CSS-свойство, для которого будет применяться переход. Можно указать несколько свойств, разделив их запятой. Если указать all , переходы будут применяться ко всем свойствам элемента.
• duration — определяет длительность перехода. Задаётся в секундах ( s ) или миллисекундах ( ms ).
• timing-function — определяет скорость перехода в разные моменты времени. Наиболее часто используются следующие функции: linear , ease , ease-in , ease-out , ease-in-out .
• delay — время задержки перед началом перехода. Задаётся в секундах ( s ) или миллисекундах ( ms ).

Примеры использования

В данном примере применяем плавный переход цвета фона ( background-color ) для элемента p при наведении курсора. Фон плавно изменится за секунду.

👉 Если вы не понимаете, что написано в этом примере кода и откуда там p , прочитайте статью про селекторы.

В этом примере применяем переход для двух свойств ( width и height ) одновременно. При наведении курсора размеры элемента p плавно увеличиваются.

Анимировать изменение цвета текста при наведении на ссылку.

Изменение размера шрифта при наведении на текст:

Нюансы

☹️ Не все свойства возможно анимировать. Для корректной работы перехода изменяемое свойство должно быть анимируемым. Например:

• Цветовые свойства: color , background-color , border-color и другие.
• Размеры и отступы: width , height , padding , margin , top , right , bottom , left и другие.
• Свойства трансформации: transform (включая rotate , scale , translate , skew и другие).
• Некоторые свойства текста: font-size , letter-spacing , word-spacing , line-height .
• Свойство прозрачности: opacity .
• Свойства границы: border-width , border-radius .
• Свойство позиционирования: position .

❌ Не все CSS-свойства могут быть анимированы. Например, свойства display , content , visibility и некоторые другие не поддерживают анимацию.

Переходы не работают при изменении свойств с помощью JavaScript. В этом случае лучше использовать CSS-анимации или JavaScript-анимации.

Если вам нужна более сложная анимация или нужно анимировать изменение свойств, которые не поддерживают переходы, вы можете использовать CSS-анимации с помощью свойств @keyframes и animation .

Поддержка браузерами

Свойство transition хорошо поддерживается всеми современными браузерами. Для детальной информации рекомендуется обратиться к сайту caniuse.

Материалы по теме

• Тренажёры по CSS-анимациям от HTML Academy.
• : hover, : focus, : active — как работают состояния элементов.
• Функции плавности — подборка функций плавности от Андрея Ситника и Ивана Соловьева.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник

How To Do CSS Transitions With Height: Auto

Creating a smooth expand/collapse animation seems easy. Surely you can set a transition on height: auto , and it’ll just work?

Sadly, the CSS gods aren’t so kind.

Instead of the smooth open and close you wanted, your element flashes to its new height. No smooth animation.

As it turns out, animating on CSS auto values doesn’t work, and it’s honestly a real shame. We need to use specific values, and that’s not a luxury we always have.

Fortunately, there are several approaches we can take to animating auto dimensions in CSS.

Method 1: Use transform

Despite its rampant use, you should avoid CSS transitions on the height or width properties (among some others).

These properties affect the page layout. To see how other elements on the page are being affected during your animation, the browser completely recalculates your page’s layout.

This is where the CSS transform property comes in. transform causes your element to be animated like an image, and skip the layout recalculations. If you can use this approach, you should.

Unfortunately, there are two deal-breakers in using transform to collapse your content:

Method 2: Animate max-height / max-width

A different approach to collapsing height is to collapse max-height in its place.

The upside of this approach is that it’s straightforward. It also manages to avoid the weird warping effect of transform: scale .

There are some downsides, though:

• We’re animating on height , with all its layout-thrashing goodness
• You need a non-auto value for max-height
• Your transition-timing applies to the max-height range, not height . This makes it nearly impossible to get a specific visual effect from your transitions.

Method 3: Calculate height with JavaScript

A lengthier (but more precise) approach is to use JavaScript to calculate the animation start and end using the element’s rendered height .

Once we determine the element’s actual height, we can inject it as inline CSS so the browser has something to transition between.

In terms of effect, this is probably the one you were going for, but with tradeoffs.

• We’re still animating on height
• We’ve introduced a fair chunk of code to address a very narrow problem
• There’s tight coupling between your JavaScript and CSS

Method 4: Nuke from orbit with FLIP + Inverse Scaling

Remember Method 1 and all the problems that using transform caused?

Well, it turns out you can fix them.

Content warping can be fixed by applying counter-scaling on your content. The FLIP technique also lets us move surrounding content in a performant way.

This looks much better than our initial transform attempt, and solves the problems we were having. However:

• This solution is big and complex. We’ve introduced a lot of code now, and it’s still a very narrow problem.
• Several moving parts need to stay synchronised
• We need a custom easing function. I’ve used linear for simplicity, but anything else gets gnarly.
• Even more coupling than the height example.

Источник

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

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

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

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

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

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

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

• В развёрнутом виде у «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-разметка также проста:

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

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

Источник