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：等待上一行的執行

回答

相關問題