CSS из будущего - calc-size

На одном из недавних собеседований меня спросили - а как бы ты анимировал открытие/закрытие меню динамической высоты? Такое часто нужно сделать и каждый раз это боль. Ну не можем мы анимировать display, и точную высоту не можем анимировать, так как ее не знаем. В итоге все сводится к 3 подходам: - захардкоженая высота(минус вайб) - анимация max-height(неплохо, но скорость раскрытия не контролируемая) - JS проходит и высчитывает высоту(заморочено)

И вот недавно появился черновик фичи calc-size в CSS. У нее много возможностей, и одна из них - анимирование неизвестной высоты. Можете потыкать мой пример на https://codepen.io/gatilin222/pen/MWdNbVM?editors=1111.

Работает это пока только в Chrome Canary c включенным #enable-experimental-web-platform-features.

И да, это драфт, но от Гугла, и с высокой долей вероятности мы увидим эту фичу в будущем.

CSS из будущего - calc-size | Сетка — новая социальная сеть от hh.ru
repost

266

input message

напишите коммент

· 09.07

Очень крутая фича. Прям топчик. Мысленно открывается небывалый диапазон возможностей. Веб-сервисы смогут работать шустрее, более гибко и без багообразующих костылей через хардкод.

ответить

· 08.07

Блин с телефона не посмотреть. Прости за глупый вопрос но стало интересно, что такое меню с динамической высотой? Это когда оно сверху выкатывается как спойлер ?

ответить

еще контент автора

еще контент автора

войдите, чтобы увидеть

и подписаться на интересных профи

в приложении больше возможностей

пока в веб-версии есть не всё — мы вовсю работаем над ней

сетка — cоциальная сеть для нетворкинга от hh.ru

пересекайтесь с теми, кто повлияет на ваш профессиональный путь