我有一个小脚本,当我点击我页面上的按钮时使用 innerHTML
添加一个名为“doge”的 div,并且在这个页面上有一个带有 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>
最佳答案
这是因为当您修改 .innerHTML
属性时,您正在修改元素的所有 HTML。
根据 MDN :
.innerHTML
- Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element.
这样做时,DOM 假定刚刚添加了 .myDiv
元素,这意味着将要重播动画。要解决此问题,请使用 .appendChild()
method相反:
var div = document.createElement('div');
div.textContent = 'such wow';
div.className += 'doge';
document.getElementById("wow").appendChild(div);
或者,作为 Teemu points out , 你也可以使用 .insertAdjacentHTML()
method :
document.getElementById("wow").insertAdjacentHTML('afterend', '<div class="doge">such wow</div>');
关于javascript - 为什么通过 innerHTML 添加元素时我的动画是 "replayed"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34401219/