1

我在 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;
}

大图

4

2 回答 2

1

我认为您可以使用 preventdefault 功能，但没有看到 js 部分或在小提琴中您也很难建议共享 JS 部分

于 2013-09-07T13:23:23.443 回答
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)
于 2013-09-07T13:30:54.990 回答