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

Question

I have animation defined in CSS3 for specific class which runs only one time when that class is added to a element. The problem is when I add dynamic content to their parent the animation runs for one more time. Everytime, content is added the animation triggers. A list element which is to be animated is automatically added to ul and it animates one time (expected behaviour) whereas, the non-animable elements are added on JS Event.

HTML:

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

When JS event occurs, a list element is added dynamically.

<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>

and the moment it is appended , the animable div triggers its animation for one more time and so on for each added element.

Is this a bug ? How can I prevent it? I am using pure 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

On our discussion in the chat, you showed the code that adds the items:

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

Your problem is that you're changing the innerHTML every time, which makes the entire content of the list to render again and again...

You should create a DOM element and use Node.appendChild( child ) instead.

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

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

elem.appendChild(item)