Javascript 如何在css中使用幻灯片效果隐藏li

我有一个ul，点击其中一个li，我想用滑动效果隐藏子ul。我尝试过高度从100%到0的动画。但这是行不通的

这是代码片段，在实际场景中会有动态数据和n个li

函数隐藏{ var li=document.getElementByIdgame； game.classList.addhide } .隐藏{ 身高：0； 溢出：隐藏； 动画名称：示例； 动画持续时间：4s； } @关键帧示例{ 0% { 身高：100%； } 25% { 身高：75%； } 50% { 身高：50%； } 100% { 身高：0%； } } A. B 1. 2.

---

在您的示例中，使用百分比不起作用

解决方案1：您需要在@keyframes中设置固定高度，如下所示：

函数隐藏{ var li=document.getElementByIdgame； game.classList.addhide } .隐藏{ 身高：0； 溢出：隐藏； 动画名称：示例； 动画持续时间：1s； } @关键帧示例{ 0% { 高度：40px； } 25% { 高度：30px； } 50% { 高度：20px； } 100% { 高度：0px； } } A. B 1. 2.

---

修复高度100%的问题，你的动画将工作。你可以使用css转换来完成。你能给出代码吗snippet@SunilGarg看看这个，我正在玩宽度，更多信息，你们可以看看这个，但在真实场景中，数据是动态绑定的，所以可能并没有n，如果李，那么我怎样才能确定我应该从什么样的px开始呢？@SunilGarg啊，这是一个很好的观点。您应该编辑您的问题，以包括此数据是动态的。在这种情况下，如果给父元素一个固定的高度，则可以使用百分比。在您的示例中，百分比不起作用的原因是因为没有具有固定高度的元素，所以当您添加百分比时，渲染器就像是什么的50%？！没有东西有固定的高度，所以我应该渲染这个元素50%的高度是什么？！我添加了一个解决方案，如果在父对象上设置了固定高度，则可以使用百分比。你也可以考虑使用vh单位。我不能用%来表示高度吗？因为我不知道li的编号，所以我不知道px的初始高度？我已经更新了question@SunilGarg我更新了我的答案。您将需要某个固定的高度，因此，如果需要响应，您可以将的高度设置为vh单位的硬编码值。如果这有帮助，请将我的答案标记为已接受。谢谢您，祝您好运。@SunilGarg最终您可能需要使用JavaScript来动态调整元素的高度。例如，如果有x个元素，并且您知道每个元素都需要20px，那么您可以使用JavaScript将元素的高度设置为x*20px。