1

そのクラスが要素に追加されたときに1回だけ実行される特定のクラスのCSS3で定義されたアニメーションがあります。問題は、動的コンテンツを親に追加すると、アニメーションがもう一度実行されることです。毎回、コンテンツが追加され、アニメーションがトリガーされます。アニメーション化されるリスト要素は自動的に追加されul、1 回アニメーション化されますが (予期される動作)、アニメーション化できない要素は 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 に答える