przesunięcie elementu do punktów js

0

Witam
Chciałbym aby mój element z pozycji absolute np 0,0 przesunął się płynnie (np jakaś animacja) do punktu 30,50 i później jak dojedzie do następnego punku 90,60 proszę o jakieś wskazówki jak do tego podejść

0

Ale chodzi mi o js, później będę musiał przesuwać element po określonym torze gdy będzie na nim wskaźnik myszki a jak zjadę z niego wskaźnikiem myszki element po tym torze będzie wracał, ale pierw chciałbym jakoś wystartować z kodem i w ogóle go przesunąć płynnie do pierwszego punktu i jak dojedzie to do drugiego

1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
#element {
  position:fixed;
  top:0px;
  left:0px;
  width:20px;
  height:20px;
  background-color:red;
  transition: all 5s linear;
}
</style>
</head>
<body>

<div id="element"></div>
<button onclick="rusz_go();">rusz go</button>

<script>
function rusz_go() {
  var e = document.querySelector("#element");
  e.style.top  = "90px";
  e.style.left = "60px";
}  
</script>
</body>
</html>
0

Ok nie pomyślałem aby w css dać transition, kombinowałem w js z animate() czy for+setTimeout, dzięki wielkie :)

0

Jeszcze jedno pytanko a jak dojadę już do tego pierwszego punktu to jak zrobić aby zaczął jechać do drugiego?

0

Możesz łapać event animationend i wtedy odwrócić animację.

0

Ale tak czy siak, używanie JS nie ma tu sensu, chyba, że chcesz np. zmieniać pozycję elementu w zależności od położenia kursora czy jakichś innych elementów. Do prostych animacji, jak opisana, wystarczy CSS:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width:100px;
  height:100px;
  background:red;
  transition:transform 2s;
}

div:hover {
  transform:translate(50px, 50px);
}
</style>
</head>
<body>

<div></div>

</body>
</html>
1

Da się to zrobić.

function move(element, x, y) {
  return new Promise((resolve) => {
    element.style.transform = `translate(${x}px, ${y}px)`;
    element.addEventListener('transitionend', resolve, {
      once: true
    });
  });
}

const button = document.getElementById('button');
const rect = document.getElementById('rect');

async function go() {
  await move(rect, 30, 50);
  await move(rect, 90, 60);
}

button.addEventListener('click', go);

Demo https://jsfiddle.net/8ugztLya/
Ale bardziej skomplikowane rzeczy (animowanie w odpowiedzi na ruchy użytkownika) lepiej robić w całości w JS nie używając CSS.
Jeszcze jedna uwaga, jak animujesz ruszające się rzeczy, to zawsze lepiej używać transform a nie top czy left. Jest to znacznie łatwiejsze dla przeglądarki. Jak animujesz z 2 czy 3 elementy to nie ma dużej różnicy, ale dla dużej ilości elementów na słabych komputerach może mulić.

0
let kulka = document.querySelector("span");

kulka.addEventListener("animationend", function () {
  console.log("animation end");
});
kulka.style.top= 50+"px";
kulka.style.left=80+"px";

Coś mi to animationend nie wypisuje console.log

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0