Javascript 类更改时淡入过渡（JS）不起作用

我正在尝试使用基本JS和CSS对更改后的innerHTML to元素进行淡入效果

这是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;
    }
}

附言。 我必须使用基本的JS（没有JQuery之类的），因为这是我为FullStack课程做的一个项目，我们应该只使用我们学到的基础知识

知道为什么它不起作用吗？

---

谢谢。：）

浏览器可能正在一次绘制中批处理所有DOM指令。因此，所有div都会立即应用“fadeIn”

要强制“fadeIn”仅应用于下一个绘制周期，请使用

这将导致浏览器看到前状态（不透明度：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;
  }
}

另一种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;
  }
}

函数打印说明（任务索引）{
//打印注释，索引用于让函数知道从数组中打印哪个任务
notesArea.innerHTML+=“任务”+（任务索引+1）+”
“+tasksArray[taskIndex].text+”
“+tasksArray[taskIndex].date+“”
//打印完成后，将所有删除按钮放入deletesArray，为每个按钮提供删除任务功能
//注意这里的“let”
让noteDivisElement=document.querySelector（#taskN“+taskIndex）；
window.requestAnimationFrame（函数（）{
NoteDivisElement.className='fadeIn'；
});
var deletesArray=document.getElementsByClassName（“glyphicon glyphicon remove circle deleteBtn”）；
对于（var i=0；i

顺便说一句：作为JS初学者课程的一部分，不得不使用闭包和window.requestAnimationFrame对我来说并不重要，所以我可能把你推向了错误的方向。无论如何，了解闭包是了解javascript的一个非常重要的部分，所以我希望它仍然有帮助。祝你好运

---

1）

嘿，谢谢你的回答：）我会尝试一下，尽管我们在课堂上还没有学习window.requestAnimationFrame。我会告诉你它是如何运作的。所以，它运作起来了！动画效果很好。但是现在，当我在一个循环中打印阵列上的所有其他注释时，只显示最后一个注释。有什么想法吗<代码>函数printalnotes（）{//为（var i=0；i再次感谢！嘿@Geert Jan再次感谢您的帮助。我尝试了新方法，得到了和以前一样的结果。它只会在阵列中的最后一个淡入淡出。如果你再加上一个音符，它就会很美地消失。但是当我刷新页面时，它应该将本地存储中保存的所有内容都保存到数组中，并打印所有内容。不幸的是，它只显示最后一个。编辑：顺便说一句，NoteDivisElement是一个全局变量。但是当它是functionWell

NoteDivisElement

的本地变量时，它也不起作用。我已经清楚地描述了这一点。但不确定为什么上面给出的两个选项对您不起作用

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;
  }
}

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;
  }
}