Javascript:WAITING上一行的执行

Question

我正在创建类似于 Accordion 的东西，元素高度未知。

.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;

因为高度是自动的，打开时，不可能过渡到自动。我不想使用最大高度技巧，因为它不是很好。

因此，我尝试使用 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";