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...";

此外，这只是首选项，但如果您的动画需要一个默认参数作为其起点，您可以将其保留。你的代码中有一个从{}到{}的位置，在下面的例子中我只是使用{}，因为0不透明度被css设置为默认值。

举个例子：

的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);

CSS对Javascript创建的元素的影响

2 个答案: