А заодно поддерживающая #статья.
Итак, анимация height до auto-значений!
Я не могу написать «я джва года ждал», потому что лично я ждал больше 12 лет!
Да, у нас была анимация min-height (максимально мерзко выглядящая). Да, год назад нам дали анимацию гридов, что скрашивало существование, но заставляло добавлять лишние обёртки.
И вот оно, свершилось! В Google Chrome 129 появилось свойство
interpolate-size: allow-keywords, дающее возможность, полностью сохраняя обратную совместимость, включать интерполяцию контентозависимых свойств узлов до auto!В них входят: width, height, min-content, max-content, fit-content и так далее.
Да, в остальных браузерах речи о поддержке пока не идёт, но это не та вещь, за которую стоит воевать. Ну не будет анимации и не будет, не страшно.
Кодпен с иллюстрации к посту: https://codepen.io/alinaki/pen/abezWpO
Только посмотрите, как просто:
:root {
interpolate-size: allow-keywords;
}
p {
transition: 1s;
overflow: hidden;
}
p:not(:hover) {
height: 5lh;
}
Да, мне ещё очень нравится единица измерения
lh aka line-height. Ну просто красота.И обещанная статья из блога разработчиков: https://developer.chrome.com/docs/css-ui/animate-to-height-auto
Будущее здесь, котаны!
#css #height #animation #auto