[tomaszs]

Czy wiesz, że możesz animować wysokość od zera do auto przy zastosowaniu obejścia z użyciem max-height?

#dlaprogramistow #css #webdev #frontend #javascript #react #angular #ember #html #vue

[Jednorybek]

@tomaszs: czy to nie jest zła praktyka wydajnosciowo? podobny efekt mozna uzyskać transformem, a wydajnosc będzie najpewniej większa

[tomaszs]

@Jednorybek: bardzo dobre pytanie. Chętnie bym zobaczył ten sam efekt z użyciem transition i porównanie ich wydajności :)

[Daredzik]

@Jednorybek: oczywiście że masz rację ;) użycie transform sugeruje przeglądarce użycie GPU do tego ;) natomiast przeliczanie max-height co cykl w CPU to słaby tip ;) @tomaszs

[tomaszs]

@Daredzik: jak byś uzyskał ten sam efekt wydajniej przy użyciu transform? :)

[moonshinerMike]

@tomaszs: wszystko fajnie gdy znasz wysokość elementu, jeżeli masz wsad tekstowy o różnej wysokości to efekt wygląda słabo.

[tomaszs]

@moonshinerMike: max-height można ustawić nadmiarowo. Jeśli chodzi o różnice w czasie wizualnym czasie animacji to można pobawić się sposobem interpolacji. W większości przypadków daje to fajne efekty.

[Daredzik]

@tomaszs: jak trudno Ci to osiągnąć, to możesz posiłkować się will-change ;) też implikuje użycie GPU do przeliczenia.

[tomaszs]

@Daredzik: dobry pomysł. Tutaj jest ciekawy artykuł porównujący wydajność bez i z will-change: https://www.maxlaumeister.com/articles/css-will-change-property-a-performance-case-study/