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事件发生时，将动态添加list元素。

<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元素并使用)。

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

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

elem.appendChild(item)

Answer 2

我认为你可以使用预防性的默认功能，但是没有看到js的部分或篡改，你也很难建议共享JS部分。