javascript - 如何将图像附加到 div，并在 1 秒内淡出图像？

Question

我正在尝试将图像附加到我的 div“gamecol”，但我想淡入，而不仅仅是立即出现。我是否需要编写一个 JavaScript 函数，或者是否有可以与 css 一起使用的方法？谢谢您的帮助。

这是我的代码：

var img = document.createElement("img");
img.src = "./images/tbltop.jpg";
img.id = "gameboard"
var gamecol = document.getElementById("gamecol");
gamecol.appendChild(img)

<div class="col-8" id="gamecol" style="padding:0"></div>

标签： javascriptjqueryhtmlcss

Answer 1

当然，您可以使用 css 来实现这一点，具体取决于您想要的功能。如果您希望它在图像进入屏幕视图时淡入，您将需要 javascipt。如果没有，您只需要说明，当附加该项目时，您使用 CSS 3 动画使其出现。它可能看起来像这样：

.game-img
{
animation: fadein 1s;
}
@keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
}