当通过innerHTML 添加元素时，为什么我的动画会“重播”？

我有一个小脚本，使用以下命令添加一个名为“doge”的 divinnerHTML当单击我的页面上的按钮时，此页面上有一个带有 CSS 关键帧动画的 div。

但是，当我单击按钮在页面上添加名为“doge”的 div 时，CSS 动画会“重播”。为什么？我该如何解决这个问题？

function addHtml() {
    document.getElementById("wow").innerHTML += '<div class="doge">such wow</div>';
}

@keyframes color {
    10% {
        background: #4CAF50;
    }
    50% {
        background: #3F51B5;
    }
    100% {
        background: #009688;
    }
}

.myDiv {
    background: #000;
    color: #fff;
    animation: color 1s;
}

.doge {
    background: #F57F17;
}

<div id="wow">
    <div class="myDiv">Hi!</div>
    <br>
    <button onclick="addHtml()">Add HTML!</button>
</div>

JSFiddle https://jsfiddle.net/mvu8g8tn/

这是因为当您修改元素时，您正在修改该元素的所有 HTML.innerHTML财产。

根据MDN https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML:

.innerHTML- 删除所有元素的子元素，解析内容字符串并将结果节点指定为元素的子元素。

在此过程中，DOM 假设.myDiv元素刚刚被添加，这意味着动画将被重播。要解决这个问题，请使用.appendChild() method https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild反而：

更新的示例 https://jsfiddle.net/32kjxkfp/

var div = document.createElement('div');
div.textContent = 'such wow';
div.className += 'doge';
document.getElementById("wow").appendChild(div);

或者，作为提姆指出 https://stackoverflow.com/questions/34401219/why-does-css-keyframe-animation-is-replayed-when-an-element-is-added-with-ja/34401259?noredirect=1#comment56545547_34401259，您还可以使用.insertAdjacentHTML() method https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML:

更新的示例 https://jsfiddle.net/dfc6xtgj/

document.getElementById("wow").insertAdjacentHTML('afterend', '<div class="doge">such wow</div>');