HTML注入时CSS动画重新启动

Question

I'm applying CSS animations to the content of a page. The animations are loaded dynamically and there I have a behavior I don't understand : I play the first animation and it works fine. Then I add and play the second animation and then the first animation is played again, together with the second animation. How can I get rid of this ?

 var container = document.getElementById("container"); function addFadeOut() { container.innerHTML += "<div id=\\"be\\" style=\\"position:absolute;z-index:2;opacity:0;width:100%;height:100%;background-color: green;animation: fadeOut 3s forwards;\\" />" } function addFadeIn() { container.innerHTML += "<div id=\\"bb\\" style=\\"position:absolute;z-index:1;opacity:0;width:100%;height:100%;background-color: red;animation: fadeIn 3s forwards;\\" />" } setTimeout(addFadeOut, 4000); addFadeIn(); 

 @keyframes fadeIn { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 0; } 100% { opacity: 1; } } #container { position: absolute; width: 300px; height: 200px; background-color: cyan; } .content { position: absolute; width: 100%; height: 100% } 

 <div id="container"> <div class="content"/> </div> 

Answer 1

CSS animations trigger on an element whenever it is inserted in the DOM.

The first item (with the fadeIn animation) is re-created when you use innerHTML again 4 seconds later (which means that the previous DOM element representing that div is removed, and another identical element is inserted).

If, as Thomas says, you insert the elements with explicit DOM manipulation, you can avoid that:

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

Answer 2

Don't use innerHTML += , use appendChild() with actual DOM-Nodes. Maybe like the following:

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

and your adapted code

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

the reason for this reset is that

container.innerHTML += markup;

is the same as

container.innerHTML = container.innerHTML + markup; 

wich is also the same as

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

and now you should see, that by assigning a new value to innerHTML the node first throws every current childNode away, and created new ones from the passed newMarkup . To you, the former and the new node look the same, to JS they are not. they may be equal, but not identical. Therefore: new node, new animation.