実現したいこと
右に500px、下に300px、2秒かけて移動させたいです。
発生している問題・分からないこと
300pxで移動が止まってしまいます。
該当のソースコード
javascript
1const element = document.getElementById("box");2 3 function slideAnimation(element, direction, distanceX, distanceY, duration) {4 let positionX = 0;5 let positionY = 0;6 7 function slide() {8 positionX += 1;9 positionY += 1;10 11 if (positionX < distanceX && positionY < distanceY) {12 if (direction === "left") {13 element.style.transform = `translateX(${-positionX}px)`;14 } else if (direction === "right") {15 element.style.transform = `translateX(${positionX}px)`;16 }17 18 element.style.transform += `translateY(${positionY}px)`;19 } else {20 clearInterval(intervalId);21 }22 }23 24 const intervalId = setInterval(slide, duration);25 }26 27 slideAnimation(element, "right", 500, 300, 2);
試したこと・調べたこと
上記の詳細・結果
300pxで移動が止まってしまいChatGPTも使いましたが、修正できませんでした。
else if (direction === "right") {
element.style.transform = translateX(${positionX}px)
;
}
ここの部分に書き足すのでしょうか?
補足
if (direction === "left") {
element.style.transform = translateX(${-positionX}px)
;
上記の部分は必要なのでしょうか?
0 コメント