CSS Grid Can Do Auto Top Transitions

No Comments

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:

CodePen Embed Fallback

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.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment