我正在尝试将图像附加到我的 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>
最佳答案
当然,您可以使用 css 来实现这一点,具体取决于您想要的功能。 如果您希望它在图像进入屏幕 View 时淡入,则需要 javascipt。 如果没有,您只需要告诉,当附加该元素时,您使用 CSS 3 动画使其出现。 它可能看起来像这样:
.game-img
{
animation: fadein 1s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
关于javascript - 如何将图像附加到div,并在1秒内淡出图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59700346/