如何将 div 从一个恒定点平滑地移动到单击按钮的位置？答案

【问题标题】：How to move a div smoothly from one constant point to the position of the button that was clicked?如何将 div 从一个恒定点平滑地移动到单击按钮的位置？
【发布时间】：2021-09-06 05:07:54
【问题描述】：

我正在制作战舰游戏，我希望每次单击“投石机”gif 时出现一个火球，然后火球从投石机 gif 顶部的设定点移动到被点击的按钮。

它不允许我上传 3mb 的 gif，所以在这里你可以看到我在做什么

https://imgur.com/gallery/TKqsW0L

纯 javascript 和纯 css，我还不知道 jquery 或 sass

这是每次点击按钮时激活的功能

function disparo(casilla)
{
    casilla.style.backgroundImage= "none" ;
    trebuchetS.play();
    document.getElementById("trebuchet").style.display="block";
    setTimeout(() => {
        document.getElementById("trebuchet").style.display="none";
    }, 1000);
    setTimeout(() => {
        document.getElementById("fireball").style.display="block";
        document.getElementById("fireball").style.display="block"
    }, 500);
    setTimeout(() => {
        document.getElementById("fireball").style.display="none";
    }, 3000);
}

我知道这听起来很懒惰，但到目前为止我还没有尝试过任何类型的动画，因为我什至不知道该怎么做。抱歉，我对 CSS 和网页设计很陌生

【问题讨论】：

我们需要看到你的 CSS 来移动火球，但是仅仅将它的显示设置更改为阻止然后到无并不会改变它的位置，所以你需要一些 JS 来决定你在哪里希望它从/到移动。
到目前为止，您自己尝试过什么来解决这个问题？

标签： javascript html css css-animations

【解决方案1】：

看到它工作 https://imgur.com/gallery/9fumD9G 用这个解决了

function disparo(casilla)
{
    casilla.style.backgroundImage= "none" ;
    trebuchetS.play();
    let objetivo=casilla.getBoundingClientRect();
    casillaTop=objetivo.top;
    casillaLeft=objetivo.left;
    document.getElementById("trebuchet").style.display="block";
    setTimeout(() => {
        document.getElementById("trebuchet").style.display="none";
    }, 1000);
    setTimeout(() => {
        document.getElementById("fireball").style.display="block";
        document.getElementById("fireball").animate([
            // keyframes
  {left: `${casillaLeft}px`, top: `${casillaTop}px`}
             ],{
  // timing options
  duration: 1500,
});
    }, 500);
    setTimeout(() => {
        document.getElementById("fireball").style.display="none";
    }, 2000);
}

【讨论】：