Javascript 如何在每次切换语句更改中添加淡入css样式和图像

该应用程序的基础是向用户展示他们向慈善机构捐款的可能结果。e、 g.当您输入$10时，它将显示“为饥饿儿童提供衣服”

我想通过在最终结果显示中淡入淡入来添加一些样式，这只会发生一次，如果我将输入更改为另一个数字以在id=“text result”中创建新的文本字符串，它不会淡入淡入，只会在没有动画的情况下切换

我希望能够通过改变switch语句来包含不同的图像

非常感谢

HTML

JS:

函数imag（）{
var x=document.getElementById（“捐赠”）.value；
var文本；
var图；
开关（真）{
案例x 10：
text=“成人服装”；
打破
}
document.getElementById（“文本结果”）.innerHTML=text；
document.getElementById（“文本结果”）.style.opacity=1；
}

---

代码笔在这里：

它不会淡入，因为在第一次输入后，不透明度设置为1，除非另有说明，否则将保持不变。您需要降低不透明度以使其淡入。在我脑子里，一个

setTimeout（）

函数就可以完成这个任务。请参阅此处的fork:

多谢各位！你有没有办法在交换机上添加一个图像？

<p> If you donate <input type="text" id="donation" value"3" onchange="imag()"> </input> you could provide <a id="text-result"></a></p>

body {
  background-color: #a3d5d3;
}

#text-result {
  opacity: 0;
  transition: 2s;
}

function imag() {
  var x = document.getElementById("donation").value;
  var text;
  var picture;

  switch (true) {
    case x <= 10:
      text = "clothes to starving children";
      break;
    case x > 10:
      text = "clothes to adults";
      break;
  }

  document.getElementById("text-result").innerHTML = text;
  document.getElementById("text-result").style.opacity = 1;
}