我有一个小脚本,innerHTML在点击我页面上的按钮时添加一个名为"doge"的div ,在这个页面上有一个带有CSS关键帧动画的div.
但是,当我单击按钮在我的页面上添加名为"doge"的div时,CSS动画将被"重放".为什么？我该如何解决这个问题？
function addHtml() {
document.getElementById("wow").innerHTML += 'such wow';
}@keyframes color {
10% {
background: #4CAF50;
}
50% {
background: #3F51B5;
}
100% {
background: #009688;
}
}
.myDiv {
background: #000;
color: #fff;
animation: color 1s;
}
.doge {
background: #F57F17;
}
Hi!
的jsfiddle
这是因为您在修改.innerHTML属性时修改了元素的所有HTML .
据MDN称:
.innerHTML- 删除元素的所有子元素,解析内容字符串并将结果节点指定为元素的子元素.
在这样做时,DOM假定.myDiv刚刚添加了元素,这意味着将重放动画.要解决此问题,请改用该.appendChild()方法:
更新的示例
var div = document.createElement('div');
div.textContent = 'such wow';
div.className += 'doge';
document.getElementById("wow").appendChild(div);
或者,正如Teemu指出的那样,您也可以使用以下.insertAdjacentHTML()方法:
更新的示例
document.getElementById("wow").insertAdjacentHTML('afterend', 'such wow');
京公网安备 11010802040832号 | 京ICP备19059560号-6 