javascript - CSS3 - 添加动态内容触发动画

Question

我在 CSS3 中为特定类定义了动画，当将该类添加到元素时，该动画只运行一次。问题是当我将动态内容添加到它们的父级时，动画会再运行一次。每次添加内容时都会触发动画。一个要设置动画的列表元素会自动添加到 ul 并设置一次动画(预期行为)，而不可设置动画的元素会添加到 JS 事件中。

HTML:

<ul>
    <li class="m"><div class="animable"></div></li>
    <li class="m"><div class="animable animateNow"></div></li>
</ul>

当JS事件发生时，动态添加一个列表元素。

<ul>
    <li class="m"><div class="animable"></div></li>
    <li class="m"><div class="animable animateNow"></div></li>
    <li class="m"><div class="animable"></div></li> // <- Sir! I am innocent. I am newly added by JS. IDK, what is happening :/
</ul>

在附加它的那一刻，可动画的 div 会再次触发其动画，对于每个添加的元素，依此类推。

这是一个错误吗？我该如何预防？我正在使用纯 JS。

CSS:

.animable {
    position:absolute;

    top:0;
    left:0;
    right:0;
    bottom:0;

    width:100%;
    height:100%;

    background:#ecf7d2;
}
.animateNow {
    opacity:0;
    animation-duration: 2s;
    animation-name: animTrans;
    -webkit-animation-duration: 2s;
    -webkit-animation-name: animTrans;
}

Answer 1

在我们的聊天讨论中，您展示了添加元素的代码:

var elem = document.getElementById("messages").getElementsByTagName("ul")[0];
elem.innerHTML += msg.data;

您的问题是您每次都在更改 innerHTML，这使得列表的全部内容一次又一次地呈现...

您应该创建一个 DOM 元素并使用 Node.appendChild(child)相反。

var elem = document.getElementById("messages").getElementsByTagName("ul")[0];

var item = document.createElement('LI');
item.outerHTML = msg.data;

elem.appendChild(item)