Анимирование высоты при помощи CSS
Про эту новость в соц. сетях не написал только ленивый, кажется. Но я же не ленивый, поэтому тоже напишу.
В прошлом году у меня был доклад про то, как многие вещи, которые мы привыкли делать при помощи JS, на самом деле уже можно делать на чистом CSS. Но мне тогда задали очень правильный вопрос: «А без костылей плавную анимацию раскрытия
Так вот, свершилось. В CSS теперь завезли свойство
Да, пока это только браузеры на основе Chromium. Да, пока это можно использовать только как прогрессивное улучшение. С другой стороны, прогрессивное улучшение на половине ваших пользователей, когда раньше не было вообще ничего — это же классно. А ещё это новое свойство вместе с функцией
https://gomakethings.com/animating-height-with-only-css/
Про эту новость в соц. сетях не написал только ленивый, кажется. Но я же не ленивый, поэтому тоже напишу.
В прошлом году у меня был доклад про то, как многие вещи, которые мы привыкли делать при помощи JS, на самом деле уже можно делать на чистом CSS. Но мне тогда задали очень правильный вопрос: «А без костылей плавную анимацию раскрытия
details уже можно как-то сделать?» Я тогда что-то невнятное ответил, что есть черновики спецификаций, можно поиграться с max-height, то есть способы есть, но не все удобные.Так вот, свершилось. В CSS теперь завезли свойство
interpolate-size. И если вы зададите interpolate-size: allow-keywords, то тогда вы действительно можете анимировать из и в height: auto. Больше не нужно хаков с расчётом высоты на JS, подстановкой в атрибут style, потом после анимации не забыть убрать. Браузер в этот момент знает, что высоту надо посчитать, прямо до пикселей.Да, пока это только браузеры на основе Chromium. Да, пока это можно использовать только как прогрессивное улучшение. С другой стороны, прогрессивное улучшение на половине ваших пользователей, когда раньше не было вообще ничего — это же классно. А ещё это новое свойство вместе с функцией
calc-size() уже предлагают добавить в Interop 2025, на что я очень надеюсь.https://gomakethings.com/animating-height-with-only-css/