当我添加带有动画的新元素时，为什么CSS动画会不断重新启动？

Question

因此，当我单击一个按钮时，我会将一些html附加到动画中的dom上，当我再次按下该按钮时，会将更多html附加到dom上并进行动画处理。我的问题是，我附加的每个元素在我按下按钮。 我希望它只动画一次，是否可以在不使用JavaScript的情况下添加和删除类？

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

    to {
        opacity: 1
    }
}

附加的Div具有附加文本类。

https://jsfiddle.net/t7ykv86r/

Answer 1

原因是因为您正在使用innerHTML更新DOM，这意味着您将DOM的整个部分转换为字符串，向其中添加另一个DOM字符串，然后转换回并渲染，从而重新呈现了整个部分。

您应该创建并附加节点。

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

参见小提琴。

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