在類更改（JS）不工作的淡入轉換

Question

我想使用基本的JS和CSS使更改後的innerHTML到元素的淡入效果。

這是JS：

function PrintNote(taskIndex) { 
    //print a note, index is given to let the function know which task to print from the array 
    notesArea.innerHTML += "<div id='taskN" + taskIndex + "'><span trash='" + taskIndex + "' class='glyphicon glyphicon-remove-circle deleteBtn'></span><strong><span class='noteTitle'>Task #" + (taskIndex + 1) + "</span><p class='noteTXT'>" + tasksArray[taskIndex].text + "</p><span class='noteDate'>" + tasksArray[taskIndex].date + "</span></strong></div>" 
    //when done printing, get all the delete buttons into the deletesArray, give each the remove task function 
    noteDivsElement = document.querySelector("#taskN" + taskIndex); 
    noteDivsElement.className = 'fadeIn'; 
    deletesArray = document.getElementsByClassName("glyphicon glyphicon-remove-circle deleteBtn"); 
    for (var i = 0; i < deletesArray.length; i++) { 
     deletesArray[i].onclick = RemoveTask; 
    } 
} 

這是CSS：

div[id^="taskN"] { 
    background-image: url("images/notebg.png"); 
    background-repeat: no-repeat; 
    height: 250px; 
    width: 200px; 
    position: relative; 
    display: inline-block; 
    opacity: 0; 
    transition: opacity 1s ease-in; 
} 

div[id^="taskN"].fadeIn{ 
    opacity: 1; 
} 

附： 我必須使用基本的JS（沒有JQuery等），因爲它爲一個項目，我爲FullStack課程做了準備，而且我們應該只使用我們學過的基礎知識。

任何想法爲什麼它不會工作？ 提前致謝。 :)

Answer 1

瀏覽器可能會批處理1個繪圖中的所有DOM指令。因此，所有divs立即得到'淡入'應用。

要強制「淡入」僅應用於下一次塗料循環，請使用reqeuestAnimationFrame。

這將導致在瀏覽器看到前狀態（不透明度：0）和之後狀態（不透明度：1）。作爲結果的過渡將在踢

是這樣的：

function PrintNote(taskIndex) { 
    //print a note, index is given to let the function know which task to print from the array 
    notesArea.innerHTML += "<div id='taskN" + taskIndex + "'><span trash='" + taskIndex + "' class='glyphicon glyphicon-remove-circle deleteBtn'></span><strong><span class='noteTitle'>Task #" + (taskIndex + 1) + "</span><p class='noteTXT'>" + tasksArray[taskIndex].text + "</p><span class='noteDate'>" + tasksArray[taskIndex].date + "</span></strong></div>" 

    //when done printing, get all the delete buttons into the deletesArray, give each the remove task function 
    var noteDivsElement = document.querySelector("#taskN" + taskIndex); 

    window.requestAnimationFrame(function(){ 
    noteDivsElement.className = 'fadeIn'; 
    }); 

    var deletesArray = document.getElementsByClassName("glyphicon glyphicon-remove-circle deleteBtn"); 
    for (var i = 0; i < deletesArray.length; i++) { 
    deletesArray[i].onclick = RemoveTask; 
    } 
} 

編輯

按照評論，上面應該在循環中調用。需要因此，請務必對noteDivsElement一個正確關閉（1）

更詳細一點解釋一下：如果你的函數體變量noteDivsElement仍然會設置後做console.log(noteDivsElement)。這可能是反直覺的，但它只是如何在JavaScript中工作。即：它泄漏到全球範圍。在每次迭代時，這個相同的變量被覆蓋。由於設置fadeIn被延遲，因此fadeIn的所有賦值均發生在循環之後，因此全部都是針對最新賦值noteDivsElement發生的。

這是一個在javascript中發生很多問題。通常在循環和異步操作組合時。

計數器的缺省方法是創建一個閉包，該閉包將變量綁定到函數參數，即使在循環完成後也可以將其作爲上下文的一部分提供。這很難解釋，所以請閱讀底部提供的鏈接。

function PrintNote(taskIndex) { 
    //print a note, index is given to let the function know which task to print from the array 
    notesArea.innerHTML += "<div id='taskN" + taskIndex + "'><span trash='" + taskIndex + "' class='glyphicon glyphicon-remove-circle deleteBtn'></span><strong><span class='noteTitle'>Task #" + (taskIndex + 1) + "</span><p class='noteTXT'>" + tasksArray[taskIndex].text + "</p><span class='noteDate'>" + tasksArray[taskIndex].date + "</span></strong></div>" 

    //when done printing, get all the delete buttons into the deletesArray, give each the remove task function 
    var noteDivsElement = document.querySelector("#taskN" + taskIndex); 

    (function(el){ 
    //'el' is part of closure and is a local variable only to this iteration 
    window.requestAnimationFrame(function(){ 
     el.className = 'fadeIn'; 
    }); 
    }(noteDivsElement)) 


    var deletesArray = document.getElementsByClassName("glyphicon glyphicon-remove-circle deleteBtn"); 
    for (var i = 0; i < deletesArray.length; i++) { 
    deletesArray[i].onclick = RemoveTask; 
    } 
} 

另一個ES6-方式來完成同樣的事情通過使用let代替var規避談及的所有問題使用適當的局部變量。這不是在所有的瀏覽器都支持尚未雖然：

function PrintNote(taskIndex) { 
    //print a note, index is given to let the function know which task to print from the array 
    notesArea.innerHTML += "<div id='taskN" + taskIndex + "'><span trash='" + taskIndex + "' class='glyphicon glyphicon-remove-circle deleteBtn'></span><strong><span class='noteTitle'>Task #" + (taskIndex + 1) + "</span><p class='noteTXT'>" + tasksArray[taskIndex].text + "</p><span class='noteDate'>" + tasksArray[taskIndex].date + "</span></strong></div>" 

    //when done printing, get all the delete buttons into the deletesArray, give each the remove task function 
    //NOTE THE 'let' here 
    let noteDivsElement = document.querySelector("#taskN" + taskIndex); 

    window.requestAnimationFrame(function(){ 
    noteDivsElement.className = 'fadeIn'; 
    }); 

    var deletesArray = document.getElementsByClassName("glyphicon glyphicon-remove-circle deleteBtn"); 
    for (var i = 0; i < deletesArray.length; i++) { 
    deletesArray[i].onclick = RemoveTask; 
    } 
} 

BTW：不必使用封閉和window.requestAnimationFrame不打我作爲一個JS初學者課程，所以我可能會推你走錯了方向的一部分。無論知道關閉是認識JavaScript的一個非常重要的部分，所以我希望它仍然有幫助。祝你好運！

1）how do closures work