在元素創建後立即觸發轉換

Question

我試圖創建一個動作，創建一個div並立即向上「浮動」，直到它離開屏幕。

爲了做到這一點，我試圖使用CSS transition，這將完全由JavaScript驅動（由於我的使用情況的限制）。

當我創建一個元素，爲其分配轉換樣式屬性，然後立即嘗試通過改變樣式來啓動轉換（top）時，會出現問題。

看起來像一個時間問題正在發生，其中top風格變化在轉換變爲可用之前觸發，因此只需立即將我的div移出屏幕，而不是實際執行轉換。

下面是一個簡化的例子：

var 
    defaultHeight = 50, 
    iCount = 0, 
    aColors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']; 

function createBlock() { 
    var testdiv = document.createElement('div'); 
    testdiv.className = 'testdiv'; 
    document.body.appendChild(testdiv); 
    testdiv.style.left = '50%'; 
    testdiv.style.backgroundColor = aColors[iCount % aColors.length]; 
    testdiv.style.width = defaultHeight + 'px'; 
    testdiv.style.height = defaultHeight + 'px'; 
    testdiv.style.fontSize = '30px'; 
    testdiv.style.textAlign = 'center'; 
    testdiv.innerHTML = iCount; 
    testdiv.style.top = '500px'; 
    testdiv.style.position = 'absolute'; 
    iCount++; 
    return testdiv; 
} 

document.getElementById('go').onclick = function() { 
    var testdiv = createBlock(); 

    testdiv.style.transition = "top 2.0s linear 0s"; 

    setTimeout(function() { 
     testdiv.style.top = (defaultHeight*-2) + 'px'; 
    }, 0); // <- change this to a higher value to see the transition always occur 
}; 

當「去」按鈕（see JSBin）被點擊迅速在div只出現零星（推測是由於上述的定時問題）。

如果你增加setTimeout的延遲值，你可以看到轉換幾乎總是有效的。

有沒有一種方法可以確定性地在創建元素後立即啓動轉換（而不必求助於延遲）？

Answer 1

對於一個過渡你需要兩個不同的狀態。變化。

在兩個渲染週期樣式之間只會被覆蓋。它們僅在（重新）呈現節點時應用。
因此，如果您的setTimeout（）在應用「舊」風格之前觸發，則只會覆蓋風格，並且您的節點將使用目標風格呈現。

Afaik。大多數（桌面）瀏覽器都會爭取60fps的幀速率，這會造成16.7ms的間隔。所以setTimeout（fn，0）很可能會在此之前觸發。你可以像上面提到的那樣增加超時時間（我推薦至少50ms），或者你可以觸發/強制執行節點的渲染;例如通過詢問它的大小。

爲了獲得節點的大小，瀏覽器首先必須將所有樣式應用到節點，以瞭解它們是如何影響它的。
此外，上下文對css很重要，所以Node必須添加到DOM的某處，以便瀏覽器能夠獲得最終計算的樣式。

龍回答簡短：

document.getElementById('go').onclick = function() { 
    var testdiv = createBlock(); 
    testdiv.style.transition = "top 2.0s linear 0s"; 

    testdiv.scrollWidth; //trigger rendering 

    //JsBin brags that you don't do anything with the value. 
    //and some minifyer may think it is irrelevant and remove it. 
    //so, increment it (`++`); the value is readonly, you can do no harm by that. 
    //but the mere expression, as shown, already triggers the rendering. 

    //now set the target-styles for the transition 
    testdiv.style.top = (defaultHeight*-2) + 'px'; 
}; 

Answer 2

另一種方法是使用animation

如果要動態創建keyframes，用javascript，這裏是一個不錯的職位表明：https://stackoverflow.com/questions/10342494/set-webkit-keyframes-values-using-javascript-variable

var 
 
    defaultHeight = 50, 
 
    iCount = 0, 
 
    aColors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple']; 
 

 
function createBlock() { 
 
    var testdiv = document.createElement('div'); 
 
    testdiv.className = 'testdiv'; 
 
    document.body.appendChild(testdiv); 
 
    testdiv.style.left = '50%'; 
 
    testdiv.style.backgroundColor = aColors[iCount % aColors.length]; 
 
    testdiv.style.width = defaultHeight + 'px'; 
 
    testdiv.style.height = defaultHeight + 'px'; 
 
    testdiv.style.fontSize = '30px'; 
 
    testdiv.style.textAlign = 'center'; 
 
    testdiv.innerHTML = iCount; 
 
    testdiv.style.top = '300px'; 
 
    testdiv.style.position = 'absolute'; 
 
    // you can preset the animation here as well 
 
    //testdiv.style.animation = 'totop 2.0s linear forwards'; 
 
    iCount++; 
 
    return testdiv; 
 
} 
 

 
document.getElementById('go').onclick = function() { 
 
    var testdiv = createBlock(); 
 
    testdiv.style.animation = 'totop 2.0s linear forwards'; 
 
};

@keyframes totop { 
 
    100% { top: -100px; } 
 
}

<button id="go">go</button>