Bonafide CSS trick alert! Nelson Menezes found out a brand new manner (that solely works in Firefox for now) that’s awfully intelligent.

Maybe that CSS can’t animate to auto dimensions, which is tremendous unlucky. Animating from zero to “no matter is critical” can 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 implies… utilizing JavaScript.

Nelson’s method is neither of these, nor some remodel-based manner 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’s solely just a little extra to it, like hiding overflow and visibility to make it look proper whereas sustaining accessibility:

That’s great. Let’s get some stars on this subject and perhaps Chrome will choose it up. However in fact, even higher can be if auto peak transitions simply began working. I can’t think about that’s completely outdoors the realm of risk.

#CSS #Grid #Auto #Peak #Transitions

Leave a Reply

Your email address will not be published. Required fields are marked *