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

P.S。我必须使用基本的JS（没有JQuery等），因为它是我为FullStack课程做的一个项目，我们应该只使用我们学到的基础知识。

知道为什么它不起作用？谢谢你。：）

Answer 1

浏览器可能在1个绘图中批处理所有DOM指令。因此所有div都会立即应用'fadeIn'。

要强制'fadeIn'仅应用于下一个绘制周期，请使用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）
上有适当的结束
更详细地解释一下：如果你在函数体之后做console.log(noteDivsElement)，那么仍然会设置变量noteDivsElement。这可能是违反直觉的，但它只是vars在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 + "'>Task #" + (taskIndex + 1) + "" + tasksArray[taskIndex].text + "" + tasksArray[taskIndex].date + "</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 + "'>Task #" + (taskIndex + 1) + "" + tasksArray[taskIndex].text + "" + tasksArray[taskIndex].date + "</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

类更改（JS）上的淡入过渡不起作用

1 个答案: