CSS Grid 可以实现自动高度过渡

真正的 CSS 技巧警报！Nelson Menezes 发现了一种新方法（*目前只在 Firefox 中有效*）非常巧妙。

您可能知道 CSS 无法对 auto 尺寸进行动画，这非常可惜。从零到“所需任何尺寸”的动画在很多情况下都会非常有用。 我们已经记录了可用的技术。 它们归结为

• 将 max-height 动画到超过您需要的某个值，这会使时间缓动不精确且不流畅。
• 使用 JavaScript 测量最终尺寸并进行动画，这意味着……使用 JavaScript。

Nelson 的技术既不是以上两种，也不是某种带有视觉怪异的基于 transform 的方法。这种技术以 CSS Grid 为核心……

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

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

令人难以置信的是，在 Firefox 中，它可以将该区域内的内容在 0 和内容的自然高度之间进行过渡。它还需要做一点额外的事情，比如隐藏溢出和可见性，使其看起来正确，同时保持可访问性

这太棒了。 让我们在这个问题上获得一些星标，也许 Chrome 会采纳它。但当然，如果 auto 高度过渡开始工作，那就更好了。我无法想象这完全不可能实现。