如何在每个switch语句更改中添加淡入淡出的CSS样式和图像

Question

该应用程序的基础是向用户显示他们向慈善机构捐款的可能结果。例如当您输入$ 10时，它会显示“为饥饿的孩子提供衣物”

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

而且我希望能够通过更改switch语句来包含不同的图像。

非常感谢。

HTML

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

CSS

body {
  background-color: #a3d5d3;
}

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

JS：

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

codepen在这里：https://codepen.io/keifreelancing/pen/ExagzxP

Answer 1

它不会消失，因为在第一次输入之后，除非另有说明，否则不透明度会设置为1并保持不变。您需要降低其不透明性，以使其淡出。setTimeout()功能可以解决问题。请参阅此处的fork：https://codepen.io/Klammyq/pen/xxbENQX。