Javascript：等待执行上一行

Question

我正在制作类似手风琴的东西，而且元素高度未知。

.accordion__item .accordion__item__content {
    height: 0;
    display:block;
    overflow: hidden;
    transition: height 0.5s ease-out;
}

.accordion__item[state=true] .accordion__item__content {
    height:auto;
    transition: height 0.5s ease;

因为高度是自动的，所以在打开时，无法转换为自动。 我不想使用max-height技巧，因为不是很好。

所以，我尝试使用scrollHeight获取内容元素的高度（accordion__item__content），并将值添加为高度的内联样式;

 content.style.height =  content.scrollHeight + "px";

我遇到的问题是随机，过渡部分比内联样式高度的设置更快，并且转换不起作用。

我需要的是延迟从javascript过渡到设置高度。

另外，不阻止加载页面，将等待最大毫秒数。

setTimeout正在工作，但它总是等待毫秒的总数，如果操作完成的速度要快得多。

Answer 1

设置高度后运行转换。为此，您将转换规则提取到单独的类中，该类将在高度之后设置。尝试这样的事情：

.accordion__item .accordion__item__content {
    height: 0;
    display:block;
    overflow: hidden;
}
.accordion__item .accordion__item__content.height-set {
    transition: height 0.5s ease-out;
}

并在javascript中：

content.classlist.add('height-set')
content.style.height =  content.scrollHeight + "px";