CSS對Javascript創建的元素的影響

Question

第一次在這里澆灌:)

沒錯，我正在大學里的一個項目上工作，我必須將其創建為“任務注釋”，並且這些注釋應該在每次創建一個並加入數組時以淡入的方式出現。

.note_input {
    height:255px;
    width:200px;
    background-image:url('../img/notebg.png');
    padding-top:25px;
    padding-left:10px;
    display:inline-block;
    animation: fadein 2s; 
    -webkit-animation: fadein 2s; 
}
    @keyframes fadein {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
    @-webkit-keyframes fadein { 
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }

那就是筆記CSS

現在我的JavaScript是這樣的：

function Note(){
    notes_p = JSON.parse(notes_j);
    var note_d = "<div>";
    for (var i = 0 ; i < notes.length ; i++) {
        note_d += "<span class='note_input'>" + "<div class='flow' ><p>"+notes[i].input+"</p></div></br>" + "</br>" +"Time:  "+ notes[i].time + "</br>" +"Date:  "+ notes[i].date;
        note_d +=  "</span>";
        };
    note_d += "</div>";
    document.getElementById("note_div").innerHTML = note_d;
    console.log(notes_p);
}

現在它可以在淡入淡出中創建一個音符，但是下面的音符也以淡入淡出的方式起作用，這意味着數組會溢出。 我希望單個數組每次都以淡入淡出的方式出現，並且我知道它與id有關，但與方向無關。

Answer 1

https://jsfiddle.net/c4k1rrge/

實際上，ID確實無關緊要。 您需要做的是使用JavaScript將動畫以編程方式應用於筆記。 你不應該有任何的動畫最初應用於筆記提前。

您可以添加任何樣式的動畫：

ele.style.animation = "animation duration etc...";

同樣，這只是首選項，但是如果您的動畫需要一個默認參數作為起點，則可以將其省略。 在您的代碼中的哪里有一個from {}和to {}，在下面的示例中，我僅使用to {}，因為CSS將默認值0設置為不透明度。

舉個例子：

CSS：

.note {
  opacity: 0;
  transition: all .3s ease-in-out;
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}

JS：

 let arr = [].slice.call(document.querySelectorAll('.note'));

for (let i = 0; i < arr.length; i++) {
  setTimeout(function() {
    arr[i].style.animation = "fadein 2s";
  }, 500 * i);
}

在上面的示例（可在此處找到： https ： //jsfiddle.net/c4k1rrge/ ）中，它們交錯排列注釋。 我不確定這是否是您要求的（對不起，我很難理解您的措辭）。

Answer 2

您正在使用.innerHTML重新創建整個列表。 這樣，每次進行更新時，瀏覽器都會在所有筆記項目上啟動動畫。 而是使用HTMLElement.appendChild(HTMLElement) 。

例如...

var generatedEl = document.createElement('div');
generatedEl.innerHTML = note_d;
document.getElementById("note_div").appendChild(generatedEl);