用CSS网格做自动高度转换的方法

真正的CSS技巧警报!Nelson Menezes想出了一个新的方法（目前只在Firefox中有效），非常聪明。

也许你知道，CSS不能对auto 尺寸进行动画处理，这是很不幸的。从零到 "任何必要 "的动画将在很多时候非常有帮助。我们已经记录了可用的技术。它们可以归结为。

• 将max-height 动画化到一些比你需要的值更多的地方，这使得计时缓和不精确，而且很笨拙。
• 使用JavaScript来测量最终的尺寸，然后按照这个尺寸制作动画，这意味着......使用JavaScript。

尼尔森的技术既不是这些，也不是一些基于transform ，具有视觉上的尴尬的方式。这项技术的核心是使用CSS网格...

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

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

令人难以置信的是，在Firefox中，该区域内的内容在0和内容的自然高度之间过渡。只不过还有一点，比如隐藏溢出和可见性，以使它看起来正确，同时保持可访问性。

这真是太好了。让我们在这个问题上得到一些星星，也许Chrome会把它捡起来。但当然，更好的是，如果auto 高度转换刚刚开始工作。我无法想象这完全超出了可能性的范围。