javascript 要素の斜め移動

実現したいこと

右に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);
上記の部分は必要なのでしょうか？