Bonafide CSS trick alert! Nelson Menezes found out a brand new means (that solely works in Firefox for now) that’s awfully intelligent.
Maybe you realize that CSS can not animate to auto dimensions, which is tremendous unlucky. Animating from zero to “no matter is critical” could be very useful fairly often. We’ve documented the out there methods. They boil all the way down to:
Animate the max-height to some greater than you want worth, which makes timing easing imprecise and janky.Use JavaScript to measure the ultimate measurement and animate to that, which suggests… utilizing JavaScript.
Nelson’s method is neither of these, nor some transform-based means with visible awkwardness. This system makes use of CSS Grid at its core…
.expander {
show: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 1s;
}
.expander.expanded {
grid-template-rows: 1fr;
}
Unbelievably, in Firefox, that transitions content material inside that space between 0 and the pure peak of the content material. There may be solely a little bit extra to it, like hiding overflow and visibility to make it look proper whereas sustaining accessibility:
That’s fantastic. Let’s get some stars on this difficulty and possibly Chrome will decide it up. However in fact, even higher could be if auto peak transitions simply began working. I can’t think about that’s completely exterior the realm of risk.
The put up CSS Grid Can Do Auto Top Transitions appeared first on CSS-Tips. You may help CSS-Tips by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!