Css轉換僅在超時函數內部顯示

我已經使用JavaScript創建了新的div並設置了它的寬度和高度。緊接着，我需要將它調整到100％的寬度，並帶有過渡效果。但只有當編輯樣式在Timeout函數內時纔會顯示。沒有它，只是跳到新的寬度。Css轉換僅在超時函數內部顯示

的CSS：

#project-detail { 
    @extend .project-detail-preview; 
    transition: width 0.25s ease-out, top 0.25s ease-out, left 0.25s ease-out, height 0.25s ease-out; 
}

腳本：

var detailContainer = document.createElement("div"); 
    detailContainer.id = "project-detail"; 
    detailContainer.innerHTML = previewContent.innerHTML; 
    detailContainer.style.width = previewWidth; 
    detailContainer.style.height = previewHeight; 

    blocksContainer.appendChild(detailContainer); 

    for (let project of source.projects) { 
    if(project.id == projectID) { 
     setTimeout(function() { 
     detailContainer.style.width = "100%"; 
     }, 1); 
    } 
    }

來源

2017-05-31 sapharick

我相信這是因爲你追加DIV的DOM，並立即（下一行代碼），你調整它的寬度爲100％。

問題是，在頁面的生命週期中，CSS沒有時間追趕和應用這兩行代碼。所以，轉換時間還沒有被應用，並且你已經調整了div的大小，所以它立刻跳到100％。另一方面，當你設置一個Timeout，它是異步的時候，Timeout裏面的函數在執行堆棧的末尾執行，也就是在將CSS規則應用到新創建的元素之後執行。你甚至可以設置0延時或者完全不延時，它的工作原理都是一樣的。

來源

2017-05-31 11:37:12

期待沉默downvotes在3 ... 2 ... 1 ... –

好的，感謝您的解釋！我花了大約四個小時才意外地發現這個解決方案..現在至少我知道它是如何工作:) – sapharick

很高興我幫助！這是否值得讚揚和接受答案？ :) –

JS是單線程的，如果你改變寬度爲20，再到100，改到20是一樣，如果沒有發生。所以你需要使用一個setTimeout（），所以它首先將它更改爲20，「稍後」它更改爲100

來源

2017-05-31 11:32:28 UXDart

我試圖用JS做這樣的事情，甚至讀了一堆關於requestAnimationFrame的文章並理解，類似的事情更好地處理CSS類。嘗試切換的動作類：

for (let project of source.projects) { 
    if(project.id == projectID) { 
     detailContainer.className += ' fullwidth-class'; 
    } 
}

並添加相同的CSS類：

.fullwidth-class { 
    width: 100%!important; 
} 
#project-detail { 
    animation-duration: 1s; 
}

來源

2017-05-31 11:35:19

不幸的是，同樣的結果.. – sapharick

Css轉換僅在超時函數內部顯示

回答

相關問題