なぜ新しい要素をアニメーションで追加すると、CSSアニメーションが再開し続けるのですか？

Question

ボタンをクリックすると、アニメーションを取得するdomにいくつかのhtmlを追加します。ボタンをもう一度押すと、htmlがdomに追加され、アニメーション化されます。私の問題は、ボタンを押すとアニメーションが表示されます。私は一度だけアニメーションを取得したい、これは可能なクラスを追加し、削除するためにJavaScriptを使用せずにですか？

.additional-text{ 
    animation:fadein 4s; 
} 
@keyframes fadein { 
    from { 
     opacity: 0; 
    } 

    to { 
     opacity: 1 
    } 
} 

追加されるDivには、追加テキストクラスがあります。あなたは、どの再レンダリングを、あなたは文字列にDOMのセクション全体を変換する意味DOMを更新し、それに別のDOM文字列を追加し、その後、戻って変換してレンダリングするinnerHTMLを使用しているので、

https://jsfiddle.net/t7ykv86r/

Answer 1

理由がありますそのセクション全体。

代わりにノードを作成して追加する必要があります。

function addMoreText(){ 
    var text = document.createElement('div') 
    text.classList.add('additional-text'); 
    text.innerHTML = '<p>Even More of my text</p>'; 
    var textEle = document.getElementsByClassName('text')[0]; 
    textEle.appendChild(text) 
} 

See Fiddle.

Answer 2

あなたが試すことが別の回避策：

var button = document.querySelector("button"); 
let count = 0; 
button.addEventListener("click", addMoreText); 

function addMoreText(){ 
    count += 1 
    var text = "<div class=`${count > 1 ? null : 'additional-text'}`><p>More of my text</p><p>Even More of my text</p></div>" 
    var textEle = document.getElementsByClassName('text')[0]; 
    textEle.innerHTML += text; 
}