Блог

Главная - Вопросы по программированию - Как плавно переместить div из одной постоянной точки в положение нажатой кнопки?

Как плавно переместить div из одной постоянной точки в положение нажатой кнопки?

#javascript #html #css #css-animations

Вопрос:

Я создаю игру в морской бой, и я хочу, чтобы каждый раз, когда вы нажимаете на gif «требушет», появлялся огненный шар, а затем огненный шар перемещался из заданной точки поверх gif требушета в положение нажатой кнопки.

Это не позволит мне загрузить gif размером 3 МБ, так что здесь вы можете увидеть, что я делаю

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 и веб-дизайне в целом

Комментарии:

1. Нам нужно увидеть ваш CSS для перемещения огненного шара, но простое изменение его настройки отображения на «блокировать», а затем на » нет » не изменит его положение, поэтому вам понадобится немного JS, чтобы решить, куда вы хотите переместить его из/в.

2. Что вы до сих пор пытались решить самостоятельно?

Ответ №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);
}
Метки: