Javascript 在JS文本内容更改上触发CSS动画

我基本上是在创建一个简单的测验应用程序。现在，当问题出错时，它会更新问题空间的文本内容，让用户知道他们错了。然后在设置超时后，它再次将其更改回问题

就目前情况而言，这很好。现在，虽然这些变化会立即发生，我希望它们会逐渐消失。我一直在试图通过改变不透明度来解决这个问题，虽然现在没有什么能影响它。所以我想我要么设置的动画不正确（很可能），要么我在JavaScript中做了一些错误的事情

所以我想要的是：

新文本内容告诉用户问题是错误的

等一秒钟 3.淡出新的文本内容，替换为旧的问题内容

对于1和3：我认为可以创建一个简单的关键帧动画，然后将其反转。（不透明度100至0%，然后不透明度0至100）

我可以用我的setTimeout等待1秒，因为现在的情况是这样的，我只是不知道如何确保动画触发来执行fadeEffect 我使用的是Vanilla Js（不喜欢Jquery），有人能给我指出正确的方向吗

Jsfiddle： 我添加了一些注释，指向我引用的特定代码元素

//问题集的标题
const title=document.querySelector（“.input\u title-input”）；
//一系列问题
常量问题=[]；
让我们选择=[]；
//选定问题
设qChosen=[]；
//如果选择了新问题，则切换
设toggle=0；
//选择输入和按钮
让question=document.querySelector（“.input\u question-input”）；
let answer=document.querySelector（“.input\u answer-input”）；
let submit=document.querySelector（“.input_submit-button”）；
let display=document.querySelector（“.input_display”）；
let card=document.querySelector（“.card_容器”）；
let start=document.querySelector（“.input_start-btn”）；
让猜测输入=document.querySelector（“.guess_input”）；
让submitGuess=document.querySelector（“.submitGuess”）；
设nextQuestion=document.querySelector（“.nextQuestion”）；
//选择所有显示项目
让displayItems=document.getElementsByClassName（“input_display-item”）；
//选择LI测试卡值
让cardQuestion=document.querySelector（“.quick_-question”）；
让cardAnswer=document.querySelector（“.quick_-answer”）；
//“提交”按钮上的事件侦听器，用于单独显示项目
submit.addEventListener（“单击”，函数（）{
如果（question.value==“”| | answer.value==“”）{
问题.classList.toggle（“错误”）；
answer.classList.toggle（“错误”）；
}否则{
createObj（）；
让垃圾桶=createDisplayItem（）；
trashCan.dataset.index=questions.length-1；
垃圾桶。添加事件列表器（“单击”，函数（e）{
start.disabled=true；
问题.拼接（this.dataset.index，1）；
//this.parentNode.remove（）；
让thisItem=this.parentNode；
淡出素（本项，1000）；
控制台。日志（问题。长度）；
});
inputReset（）；
切换=问题。长度；
start.removeAttribute（“已禁用”）；
控制台。日志（问题。长度）；
}
});
start.addEventListener（“单击”，函数（）{
generateCard（）；
隐藏输入（）；
});
/* ============================================
==============================================*/
//用于测试猜测是否正确的事件侦听器
submitGuess.addEventListener（“单击”，函数（）{
if（guessInput.value.toLowerCase（）==qChosen.answer.toLowerCase（））{
卡片.classList.toggle（“翻转”）；
submitGuess.disabled=true；
}否则{
//在此处插入错误消息
cardQuestion.textContent=“您猜错了，请再试一次”；
//SetTimeout可重置回所选问题
setTimeout（函数（）{
cardQuestion.textContent=qChosen.question；
}, 1000);
}
});
/* ============================================
==============================================*/
//选择下一个问题
addEventListener（“单击”，函数（））{
卡片.classList.toggle（“翻转”）；
猜输入值=”；
submitGuess.disabled=false；
设置超时（generateCard，1000）；
});
//创建要包含到数组的对象
函数createObj（）{
设obj={}；
obj.question=question.value；
obj.answer=answer.value；
问题。推送（obj）；
}
//提交后将输入重置为空白
函数inputReset（）{
问题.价值=”；
答案：value=“”；
if（question.classList.contains（“error”））{
问题.classList.toggle（“错误”）；
answer.classList.toggle（“错误”）；
}
}
//创建每个显示项
函数createDisplayItem（）{
//创建新Div
设newUl=document.createElement（“ul”）；
//创建Li和图像元素
让liQuestion=document.createElement（“li”）；
让liAnswer=document.createElement（“li”）；
让trashCan=document.createElement（“img”）；
//设置img src
trashCan.src=“../assets/trash.svg”；
//定级
newUl.className=“输入\显示项”；
liQuestion.className=“输入\显示问题”；
liAnswer.className=“输入\显示-应答”；
trashCan.className=“输入\显示-删除”；
//设置LI文本内容
liQuestion.textContent=question.value；
liAnswer.textContent=answer.value；
//附加子项
display.appendChild（newUl）；
纽乌尔·查德（液化）；
纽乌尔·阿佩奇尔德（liAnswer）；
返回newUl.appendChild（垃圾桶）；
}
//每个问题生成卡片信息
函数generateCard（）{
随机（）；
如果（切换<0）{
cardQuestion.textContent=“没有其他问题了”；
cardAnswer.textContent=“没有其他问题了”；
}否则{
cardQuestion.textContent=qChosen.question；
cardAnswer.textContent=qChosen.answer；
}
}
    // Event Listener to test if guess is correct
submitGuess.addEventListener("click", function() {
  if (guessInput.value.toLowerCase() === qChosen.answer.toLowerCase()) {
    card.classList.toggle("flip");
    submitGuess.disabled = true;
  } else {
    // Insert wrong message here
    cardQuestion.style.animation="colorfadeerr 0.5s ease-in-out forwards";
    // SetTimeout to reset back to Chosen Question
    setTimeout(function(){
      cardQuestion.style.animation="colorfadequestion 0.3s ease-in-out";            
    }, 1500);
  }
});

cardQuestion.addEventListener("animationstart", function() {
  if(cardQuestion.textContent === qChosen.question)
    cardQuestion.textContent = "You have guessed incorrectly. Please Try Again";
  else
    cardQuestion.textContent = qChosen.question;
});

@keyframes colorfadeerr {
  0% {
    color: rgba(255,255,255,0.0); }
  10% {
    color: rgba(255,255,255,0.0); } 
  100% {
    color: rgba(255,200,200,1.0); } 
    }

@keyframes colorfadequestion {
  0% {
    color: rgba(255,255,255,0.0); }
  30% {
    color: rgba(255,255,255,0.0); } 
  100% {
    color: rgba(255,255,255,1.0); } 
    }