Javascript CSS动画在HTML注入时重新启动

我正在将CSS动画应用于页面内容。动画是动态加载的，我有一个行为我不明白：我播放第一个动画，它工作正常。然后我添加并播放第二个动画，然后再次播放第一个动画以及第二个动画。我怎样才能摆脱这个

var container=document.getElementById（“容器”）；
函数addFadeOut（）{
container.innerHTML+=“”
}
函数addFadeIn（）{
container.innerHTML+=“”
}
setTimeout（addFadeOut，4000）；
addFadeIn（）
@关键帧fadeIn{
0% {
不透明度：1；
}
100% {
不透明度：0；
}
}
@关键帧淡出{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
#容器{
位置：绝对位置；
宽度：300px；
高度：200px；
背景色：青色；
}
.内容{
位置：绝对位置；
宽度：100%；
身高：100%
}
CSS动画在元素插入DOM时触发

当您在4秒钟后再次使用
innerHTML
时，将重新创建第一项（带有
fadeIn
动画）（这意味着表示该div的前一个DOM元素将被删除，并插入另一个相同的元素）

如Thomas所说，如果使用显式DOM操作插入元素，则可以避免：

var container = document.getElementById("container");
function addFadeOut() {
  var el = document.createElement("div")
  el.style="position:absolute;z-index:2;opacity:0;width:100%;height:100%;background-color: green;animation: fadeOut 3s forwards;"
  container.appendChild(el)
}
function addFadeIn() {
  var el = document.createElement("div")
  el.style="position:absolute;z-index:1;opacity:0;width:100%;height:100%;background-color: red;animation: fadeIn 3s forwards;"
  container.appendChild(el)
}
setTimeout(addFadeOut, 4000);
addFadeIn();

每当元素插入DOM中时，就会触发CSS动画

当您在4秒钟后再次使用
innerHTML
时，将重新创建第一项（带有
fadeIn
动画）（这意味着表示该div的前一个DOM元素将被删除，并插入另一个相同的元素）

如Thomas所说，如果使用显式DOM操作插入元素，则可以避免：

var container = document.getElementById("container");
function addFadeOut() {
  var el = document.createElement("div")
  el.style="position:absolute;z-index:2;opacity:0;width:100%;height:100%;background-color: green;animation: fadeOut 3s forwards;"
  container.appendChild(el)
}
function addFadeIn() {
  var el = document.createElement("div")
  el.style="position:absolute;z-index:1;opacity:0;width:100%;height:100%;background-color: red;animation: fadeIn 3s forwards;"
  container.appendChild(el)
}
setTimeout(addFadeOut, 4000);
addFadeIn();

不要使用
innerHTML+=
，对实际的DOM节点使用
appendChild（）
。可能是这样的：

//a simple Utility to convert html into a documentFragment (can contain multiple DOM-nodes)
var dummy = document.createElement('div');
function fromHTML(html){
    var node, frag = document.createDocumentFragment();
    for(dummy.innerHTML = html; node = dummy.firstChild; frag.appendChild(node));
    return frag;
}

还有你的代码

var container = document.getElementById("container");
function addFadeOut() {  
    var markup = "<div id=\"be\" style=\"position:absolute;z-index:2;opacity:0;width:100%;height:100%;background-color: green;animation: fadeOut 3s forwards;\" />";

    container.appendChild(fromHTML(markup));
}
function addFadeIn() {
    var markup = "<div id=\"bb\" style=\"position:absolute;z-index:1;opacity:0;width:100%;height:100%;background-color: red;animation: fadeIn 3s forwards;\" />";

    container.appendChild(fromHTML(markup));
}
setTimeout(addFadeOut, 4000);
addFadeIn();

与

container.innerHTML = container.innerHTML + markup; 

var newMarkup = container.innerHTML + markup;
container.innerHTML = newMarkup;

wich也和

container.innerHTML = container.innerHTML + markup; 

var newMarkup = container.innerHTML + markup;
container.innerHTML = newMarkup;

现在您应该看到，通过给
innerHTML
分配一个新值，节点首先丢弃当前的所有子节点，并从传递的
newMarkup
创建新的子节点。对您来说，前一个节点和新节点看起来相同，而对JS来说则不同。它们可能相等，但不完全相同。因此：新节点，新动画。
不要使用
innerHTML+=
，对实际的DOM节点使用
appendChild（）
。可能是这样的：

//a simple Utility to convert html into a documentFragment (can contain multiple DOM-nodes)
var dummy = document.createElement('div');
function fromHTML(html){
    var node, frag = document.createDocumentFragment();
    for(dummy.innerHTML = html; node = dummy.firstChild; frag.appendChild(node));
    return frag;
}

还有你的代码

var container = document.getElementById("container");
function addFadeOut() {  
    var markup = "<div id=\"be\" style=\"position:absolute;z-index:2;opacity:0;width:100%;height:100%;background-color: green;animation: fadeOut 3s forwards;\" />";

    container.appendChild(fromHTML(markup));
}
function addFadeIn() {
    var markup = "<div id=\"bb\" style=\"position:absolute;z-index:1;opacity:0;width:100%;height:100%;background-color: red;animation: fadeIn 3s forwards;\" />";

    container.appendChild(fromHTML(markup));
}
setTimeout(addFadeOut, 4000);
addFadeIn();

与

container.innerHTML = container.innerHTML + markup; 

var newMarkup = container.innerHTML + markup;
container.innerHTML = newMarkup;

wich也和

container.innerHTML = container.innerHTML + markup; 

var newMarkup = container.innerHTML + markup;
container.innerHTML = newMarkup;

现在您应该看到，通过给
innerHTML
分配一个新值，节点首先丢弃当前的所有子节点，并从传递的
newMarkup
创建新的子节点。对您来说，前一个节点和新节点看起来相同，而对JS来说则不同。它们可能相等，但不完全相同。因此：新节点，新动画。
谢谢，此解决方案只需对原始代码进行少量修改即可工作。只有一个问题可以确定，为什么要将虚拟变量放在fromHTML函数之外？@user2223898不为每次调用
fromHTML
创建一个新的
dummy
，而是只创建一次，然后重用此对象。此节点用于解析传递的标记，而不是添加的节点。谢谢，此解决方案只需对原始代码进行少量修改即可工作。只有一个问题可以确定，为什么要将虚拟变量放在fromHTML函数之外？@user2223898不为每次调用
fromHTML
创建一个新的
dummy
，而是只创建一次，然后重用此对象。此节点用于解析传递的标记，它不是添加的节点。感谢您的回答，我确信您的解决方案有效，但我已批准Thomas解决方案，因为它需要在原始代码中进行较少的更改。感谢您的回答，我确信您的解决方案有效，但我已经批准了Thomas解决方案，因为它需要在原始代码中进行较少的更改。您可以尝试单独添加动画吗？它们已经单独添加了否？或者我不明白你的意思？你能试着单独添加动画吗？它们已经单独添加了没有？或者我不明白你的意思？