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>

Answer 1

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

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