CSS中的动态高度动画

在尝试了以下技术之后，我仍然在研究如何在CSS中设置元素高度的动画

最大高度法

对于我来说，这是不好的，因为所有元素都有不同的高度。此外，您将注意到在高度开始设置动画恢复到0px之前有一个轻微的延迟。当元素的高度远小于动画中设置的最大高度500px（例如50px）时，就会发生这种情况

变换法

同样，这对我的情况没有好处，因为你可以看到它没有像最大高度方法那样显示更多/更少的元素。这种方法适用于高度不同的图元，但可以看到它是从上到下旋转的。这种方法也有同样的问题

---

所以你可以看到我需要动画从上到下显示元素。此外，动画应该毫不延迟地显示/隐藏鼠标上的元素并将其移出。

我已经在您的ul周围设置了一个包装

我在Y轴上变换了包装器和ul，一个向上，另一个向相反方向。将变换量设置为100%可使其精确调整到元素的尺寸

所以，这是一种滑动门，可以逐步显示内容

这两个元素具有相同的高度是这项技术成功的关键。我已将保险商实验室的空白转让给包装商

.包裹{ 利润率：10px； 溢出：隐藏； 转化：translateY-100%； 变换：变换1s线性； 位置：相对位置； } .包裹{ 边际：0px； 转化：转化率100%； 过渡：继承； } .触发器：悬停.换行{ 转化：转化率为0%； } .触发器：悬停。包裹ul{ 转化：转化率为0%； } .trigger~.trigger{ 左边距：200px； } 悬停 项目1 项目2 项目3 悬停 项目1 项目2 项目3 项目4 项目5 项目6 项目7 项目8 项目9

---

不，我不想为此使用JavaScript。以防万一你改变主意。为什么scale不起作用？提到的所有方法都起作用，只是不能满足我的要求。见我问题的最后一段。