为什么这个 setInterval() 不能在这个 if 语句中将 snake 变量移动到正确的方向？

Question

我想左右移动蛇，它很好地向右移动但是当我向左单击时它只是停止并且不向左移动，我知道 setInterval 返回 id 但为什么它不向右移动？

const snake = document.querySelector(".box");
const btns = document.querySelectorAll(".btns > button");
var X = 0;
var intervalrightId;
var intervallefttId;

btns.forEach((btn) => {
    btn.addEventListener("click", function(e) {
        if (e.target.textContent == "right") {
            if (intervallefttId) {
                clearInterval(intervallefttId)
            }

            intervalrightId = setInterval(() => {
                X += 100;
                snake.style.left = X;
            }, 500)
        }

        if (e.target.textContent == "left") {
            if (intervalrightId) {
                clearInterval(intervalrightId)
            }

            intervallefttId = setInterval(() => {
                X -= 100;
                snake.style.right = X;
            }, 500)
        }
    })
})

Answer 1

left

和

right

这两种风格是冲突的。 按右，然后按左，导致这样的情况：

<div class="box" style="left: 100px; right: 200px;"/>

这没有意义。你应该依靠

left

或

right

而不是两者

Answer 2

使用变换属性而不是左右属性。

替换

snake.style.right = X;

来自

snake.style.transform= 'translateX({X}px)

当你使用 left 和 right 属性时，DOM 对象是根据父对象到左边或右边的距离定位的（plus 对象应该将 position 属性设置为 absolute，否则 left 和 right 属性将不起作用）。例如，如果父对象的宽度为 100px，而您将其子对象的左属性设置为 10px，则子对象将位于父对象左边框右侧 10xp 处，而当您将 right 属性设置为 10px 时，子对象将位于父对象右边框左侧 10px 处。如果您的对象同时具有右属性和左属性，则其中一个将被忽略。这就是为什么使用变换属性将对象移动到其先前位置是更好的选择。