CSS Grid Can Do Auto Height Transitions

CSS tips! Nelson Menezes has discovered a new approach (currently only works in Firefox), which is very clever.

You may know that CSS cannot animate to the automatic size, which is very unfortunate. From zero animation to "demand size" is very useful in many cases. We have documented the available technologies. They boil down to:

• Animate max-height to a larger value than you need, which makes time easing inaccurate and not smooth.
• Use JavaScript to measure the final size and animate it, which means...use JavaScript.

Nelson’s technology is neither these nor some kind of conversion-based approach that has visual awkwardness. This technology core uses CSS Grid...

 .expander {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1s;
}

.expander.expanded {
  grid-template-rows: 1fr;
}

Incredibly, in Firefox, this transitions between content within that area from 0 to content's natural height. Just do a little extra work like hiding overflows and visibility to make it look right while maintaining accessibility:

This is awesome. Let's get some attention on this issue, and maybe Chrome will adopt it too. But of course, it would be better if the automatic height transition started working. I can't imagine this is completely impossible.

The above is the detailed content of CSS Grid Can Do Auto Height Transitions. For more information, please follow other related articles on the PHP Chinese website!