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
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
0
Wygląda na to, że w przypadku transition jest inny event
0
Ale transitionend już działa :)
kulka.addEventListener("transitionend", function () {
console.log("animation end");
});
0
Po tych wskazówkach powinienem już coś zrobić dzięki Wam wielkie :) jak ugrzęznę pozwolę sobie jeszcze zapytać :)