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

你可以使用preventdefault函数我认为但是没有看到js部分或小提琴你很难建议分享JS部分

Answer 2

在聊天中的讨论中，您展示了添加项目的代码：

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)