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

Question

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

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

我希望能够通过更改开关语句包含不同的图像。

非常感谢。

.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()函数可以做到这一点。请参阅此处的分叉：https://codepen.io/Klammyq/pen/xxbENQX。