Анимация collapse без JavaScript

Помните эти details и collapse элементы, которые есть в каждой дизайн-системе? Все они требуют плавной анимации при переключении 💅🏻. Есть несколько способов как это сделать.

Можно, поиграть с max-height, или использовать JavaScript в связке с CSS-переменными и функцией calc() для динамической подстановки фактической высоты. Или вообще — подставлять высоту через JavaScript напрямую через style.height.

У всех этих подходов есть минусы. Использование JavaScript для анимации — это нагрузка на производительность. Плюс нужно учитывать адаптивность страницы и возможность динамического изменения контента, а значит и итоговой высоты.

W3C выпустили черновик CSS Values and Units Module Level 5 который сейчас на стадии обсуждения и экспериментов. В нем предлагается новое свойство interpolate-size: allow-keywords, которое позволяет применять transition переходы для значений размеров, таких как: auto, fit-content, max-content и других.

Например:

:root { interpolate-size: allow-keywords; } .container { height: 0; transition: height 0.3s ease; overflow: hidden; } .container.open { height: max-content; }

На данный момент это экспериментальная функция, поддерживаемая только в браузерах Chrome.

В сочетании с новой функцией calc-size() можно создать ✨ более гибкие решения. Например, сделать раскрытие контейнера только на 30% от максимальной высоты контента:

.container.open { height: calc-size(max-content, size * 0.3); }

Кроме того, в Chrome сейчас работают над анимацией тега details с помощью ::details-content, что в комбинации с interpolate-size: allow-keywords даст корректную анимацию при открытии и закрытии элемента 🔥

В общем, с нетерпением ждём, когда эти нововведения станут стандартом и получат широкую поддержку в других браузерах!

#css

🚀 Но все не так плохо!