（译）CSS实现高度从0到auto的过度动画
原文中文，约900字，阅读约需3分钟。
📝
内容提要
本文介绍了使用CSS实现高度从0到auto的过渡动画的方法，通过表格布局和网格布局可以简单而完美地实现。以前的方法存在问题，现在可以尝试新的解决方案。
🔎
延伸解读
传统方法的局限
文章指出，使用max-height实现高度过渡时，由于需要设置一个较大的值来确保覆盖内容高度，会导致动画速度变慢，并且在折叠时出现短暂停顿。而scaleY方法虽然能实现过渡，但动画过程中内容会被挤压变形，影响视觉体验。这两种常见方案都存在明显缺陷。
网格布局方案的优势
文章提出的新方案利用grid-template-rows属性，在0fr和1fr之间过渡，从而实现高度从0到auto的平滑动画。这种方法不需要预设最大高度，避免了max-height的动画速度问题，同时也不会像scaleY那样导致内容变形，效果更为自然。
实现细节与注意事项
在网格布局方案中，需要将折叠容器的display设置为grid，并设置grid-template-rows为0fr，过渡属性为grid-template-rows。展开时改为1fr。同时，内部元素需要设置overflow: hidden，以隐藏溢出内容。这些细节确保了动画的流畅性和正确性。
❓
Q&A
如何使用CSS实现高度从0到auto的过渡动画？
可以通过使用网格布局和grid-template-rows属性来实现流畅的折叠动画效果。
传统的max-height方法有什么缺陷？
max-height方法需要设置较大的值，导致动画速度变慢和停顿。
scaleY方法在动画中会出现什么问题？
scaleY方法会导致内容变形，影响用户体验。
为什么使用网格布局是一个更好的解决方案？
网格布局可以避免传统方法的缺陷，实现更流畅的折叠动画效果。
在实现折叠动画时，如何设置CSS属性？
可以设置.accordion-body的display为grid，并使用grid-template-rows属性来控制高度变化。
这篇文章介绍了哪些CSS动画的实现方法？
文章介绍了传统的max-height和scaleY方法以及新的网格布局方法。
🏷️
