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