JS如何创建一个图像并立即将其转换为开始和结束样式

Question

我正在写一个JS游戏，它通过设置IMG元素的x/y/width/height/opacity来移动IMG元素，并允许CSS转换将其逐渐移动到目标，并在到达时触发事件。这一切都很好。

我遇到的问题是创建一个新的IMG，并立即开始向目标移动并进行转换。我已经进行了实验，我能得到的最好的结果是图像已经在其目标位置创建，我怀疑这是因为在IMG添加到文档之前，目标样式已经取代了源样式。

我如何创建IMG与：

• 开始x/y/宽度/高度/不透明度等
• 目标x/y/宽度/高度/不透明度等
• 过渡时间
• 函数在完成转换时运行

我希望只使用普通JS而不使用JQuery之类的框架会有一个答案，因为这个游戏写作练习的目的是练习JS开发。

更新：根据请求，我的一次尝试失败了。我尝试过以各种方式打乱这些注释分隔的块，但都没有产生触发转换的预期结果。

function ThrowBall() {
/* Create and configure an image. */
var img = document.createElement("img");
img.src = "https://www.thesunsetlounge.co.uk/Images/DiscoSpot.png"
/* Set starting style. */
img.style.position = "fixed";
img.style.display = "block";
img.style.zIndex = "999";
img.style.top = "100px";
img.style.left = "100px";
/* Add to document. */
document.body.appendChild(img);
/* Set transition. */
img.style.transition = "all 10s";
/* Move to target. */
img.style.left = "300px";
}
/* Run. */
window.onload = ThrowBall;

更新#2:

由于@Salketer的评论，我能够通过将设置CSS和转换结束事件的代码移动到一个函数中并将该函数传递到window.requestAnimationFrame中来解决我的问题。

Answer 1

您看到的问题是img从未与left=100px一起显示。在DOM上绘制更改之前，它的左侧样式立即设置为300px。由于它从未出现在100px，因此不需要转换。。。在移动它之前，你应该让它在起始位置至少画一次

function ThrowBall() {
/* Create and configure an image. */
var img = document.createElement("img");
img.src = "https://www.thesunsetlounge.co.uk/Images/DiscoSpot.png"
/* Set starting style. */
img.style.position = "fixed";
img.style.display = "block";
img.style.zIndex = "999";
img.style.top = "100px";
img.style.left = "100px";
/* Add to document. */
document.body.appendChild(img);
/* Set transition. */
img.style.transition = "all 10s";
/* Move to target. */
window.requestAnimationFrame(()=>{img.style.left = "300px";});
}
/* Run. */
window.onload = ThrowBall;

在两个样式定义之间添加延迟应该可以纠正问题。我使用了requestAnimationFrame，因为它是玩DOM的首选，但在最初绘制图像后运行的任何东西都可以。就像setTimeout(...,1000);，但你会看到图像静止一秒钟！