Javascript Css如何获得从0到某个值的平滑高度过渡？

所以我试着让列表中的每个元素一个接一个地出现。为了做到这一点，我通过javascript在我想要操作的每个列表元素上使用css。 我现在的问题是，尽管元素的高度看起来很小，但看起来并不平滑。 这是我的源代码：

outercell.style.transition="max-height 2s ease-in";
    outercell.style.maxHeight="125px";
    outercell.style.visibility="visible";
    outercell.style.width="50px";
    outercell.style.marginBottom="4px";
    outercell.style.border="2px solid";
    outercell.style.borderRadius="5px";
    outercell.style.borderColor="#6E6E6E";
    outercell.style.boxShadow="1px 1px 5px #888888";
    outercell.style.padding="3px 25px";

我觉得这和边境有关，但我现在真的不知道该如何摆脱它

感谢您的帮助。

---

非常感谢；）

其obv仅为一个列表元素的代码。这将在元素数上进行迭代，每次迭代之间有一个延迟。请确保每个项的初始最大高度值为0，css转换仅在设置初始值时正确转换。如果这不起作用，你能设置一个小的代码笔来演示吗？尝试了它，它似乎不起作用（如果我没有做错什么的话）。如果你在13号星期二点击。元素另一个列表展开。我只是采取我的第一个Html css步骤，所以对我温柔；D我知道代码很乱，现在好像不起作用，我会处理代码笔的事情