Javascript：等待上一行的执行

我正在创建类似于手风琴的东西，并且元素高度未知。Javascript：等待上一行的执行

.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正在工作，但它总是等待总的毫秒数，事件如果动作做得快得多。

来源

2017-04-24 user3541631

不要等待什么，只是运行的过渡设置高度之后。 – dfsq

仅当设置高度时才使用JavaScript添加转场，您可以在单独的类中定义转场规则，并使用javascript动态添加此转场类。 – Kaddath

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

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

来源

2017-04-24 14:51:37 dfsq

Javascript：等待上一行的执行

回答

相关问题