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.
И да, это драфт, но от Гугла, и с высокой долей вероятности мы увидим эту фичу в будущем.
· 08.07
Очень нужная фича, хотелось бы. Но в чем проблема с анимацией, не поняла
ответить
коммент удалён
· 08.07
Проблема в том что анимация будет хорошо работать в случае когда известна высота, например с 0 до 300px браузер отлично сделает transition. В вот если высота динамическая - тогда начинаются проблемы
ответить
ответ удалён
· 08.07
Интересно, не замечала проблем с этим. Высоту дива меняете? Height просто?
ответить
ответ удалён
· 08.07
Ну вот у вас есть меню, в нем может быть 3 пункта, а может быть 10. Высота будет разной. А в css нужно указать конечную высоту в раскрытом состоянии. Ее у вас нет.
ответить
ответ удалён
· 08.07
Ааа, поняла, речь о выпадашках. Так-то jQuery нужно, одним css не очень хорошо
ответить
ответ удалён
· 08.07
Не надо jQuery в 2024
ответить
ответ удалён
· 08.07
Ну как угодно, в посте три варианта не хуже и не лучше. Тот же js. Или другой Фреймворк, что кому удобнее
ответить
ответ удалён
· 08.07
А вот новая фича была бы супер, когда будет поддержка
ответить
ответ удалён