CSS网格可以进行自动高度过渡

CSS技巧提示！Nelson Menezes 发现了一种新方法（目前仅在 Firefox 中有效），非常巧妙。

您可能知道 CSS 无法动画到自动尺寸，这非常不幸。从零动画到“所需尺寸”在很多情况下都非常有用。我们已经记录了可用的技术。它们归结为：

• 将 max-height 动画到比您需要的更大的值，这使得时间缓动不精确且不流畅。
• 使用 JavaScript 来测量最终大小并对其进行动画处理，这意味着……使用 JavaScript。

Nelson 的技术既不是这些，也不是某种具有视觉尴尬的基于转换的方法。此技术核心使用了 CSS Grid……

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

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

令人难以置信的是，在 Firefox 中，这会在该区域内的内容之间进行 0 到内容自然高度之间的过渡。只需要做一点点额外的工作，例如隐藏溢出和可见性以使其外观正确，同时保持可访问性：

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

以上是CSS网格可以进行自动高度过渡的详细内容。更多信息请关注PHP中文网其他相关文章！