Javascript 为什么在我用动画添加新元素时css动画会不断重新启动？

因此，当我单击一个按钮时，我会将一些html附加到dom中，并设置动画，当我再次按下按钮时，更多的html会附加到dom中并设置动画。。我的问题是，当我按下按钮时，我附加的每个元素都会被设置为动画。我只想让它动画一次，这是否可能不使用javascript添加和删除类

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

    to {
        opacity: 1
    }
}

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

---

原因是您正在使用

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

函数addMoreText（）{
var text=document.createElement（'div'）
text.classList.add（'additional-text'）；
text.innerHTML=“我的更多文本”
”；
var textEle=document.getElementsByClassName（'text'）[0]；
textEle.appendChild（文本）
}

---

原因是您正在使用

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

函数addMoreText（）{
var text=document.createElement（'div'）
text.classList.add（'additional-text'）；
text.innerHTML=“我的更多文本”
”；
var textEle=document.getElementsByClassName（'text'）[0]；
textEle.appendChild（文本）
}

---

您可以尝试的另一种解决方法：

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

var-button=document.querySelector（“按钮”）；
让计数=0；
按钮。addEventListener（“单击”，addMoreText）；
函数addMoreText（）{
计数+=1
var text=“1？null:'附加文本'}`>我的更多文本
我的更多文本
“
var textEle=document.getElementsByClassName（'text'）[0]；
textEle.innerHTML+=文本；
}

您可以尝试的另一种解决方法：

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

var-button=document.querySelector（“按钮”）；
让计数=0；
按钮。addEventListener（“单击”，addMoreText）；
函数addMoreText（）{
计数+=1
var text=“1？null:'附加文本'}`>我的更多文本
我的更多文本
“
var textEle=document.getElementsByClassName（'text'）[0]；
textEle.innerHTML+=文本；
}

我认为这是因为整个div都被重写了。当你添加一些东西时，Javascript不仅仅是把新元素放在它下面。它在DOM中完全重写了它，使浏览器成为一个“新”元素。我认为这是因为整个div都被重写了。当你添加一些东西时，Javascript不仅仅是把新元素放在它下面。它在DOM中完全重写了它，使浏览器成为一个“新”元素。使用它代替“textEle.insertAdjacentHTML（'beforeend'，text）；”谢谢！改为使用“textEle.insertAdjacentHTML（'beforeend'，text）；”谢谢！