Javascript CSS关键帧--从动态高度开始

我有一大堆清单项目。我希望当我点击它时，每一个都能垂直展开，就像手风琴一样。为了做到这一点，我使用了关键帧，如下所示：

@关键帧展开{
0%{高度：100px；}
100%{高度：200px；}
}

---

唯一的问题是，这些列表项在高度上是动态的，因为它们包含其他元素。有没有办法为关键帧设置动态起始高度？它的工作方式是，如果一开始它大于

100px

，它会先缩小然后增大。

为列表项指定一个

最大高度

，然后单击时使用以获得一个

最小高度

。对列表项使用

overflow:hidden

，以包含将使列表项超过100px的项

工作示例 在本例中，所有列表项在单击时展开。显然，您将更改javascript以仅展开单击的列表项

var expand=document.getElementById（“项目”）；
expand.addEventListener（'click'，function（））{
this.classList.toggle（'click'）；
}，假）
*{
保证金：0；
填充：0；
列表样式：无；
}
保险商实验室{
背景：#FF0；
填充：1px0；
}
李{
背景：#F00；
利润率：10px；
过渡：所有1；
最大高度：100px；
溢出：隐藏；
}
.点击李{
最小高度：200px；
}

项目
较大的

项目
最大的

项目

在

这个

列表
实现这一点的最佳方法是在div上放置一个转换，然后通过Javascript操作高度css。
0%处的高度是该元素的原始高度，对吗？问题是高度：auto；-->高度：200px；不行。因此，请使用“最大高度”。代码类似于@keyframe expand{0%{max height:0；}100%{max height:200px；}}}@chipChocolate.py是的，在0%时它是原始高度。