javascript - 使用 transition-delay 选项 (css) 和 JS 使 div 移动

Question

我想创建一个可以平滑移动方 block 的函数。我更喜欢为此使用 CSS 选项“transition-duration”，但它似乎不适用于该位置。我检查了一下，它确实适用于背景色...

CSS文件

 #cart {
            position: relative;
            transition-duration: 0.5s;
            background-color: green;
        }

JS文件

function start() {
    document.getElementById("cart").innerHTML = "test2";
    document.getElementById("cart").style.left = "100";
    document.getElementById("cart").style.background = "gray";
}

因此，背景颜色确实会在 2 秒内发生变化，而不是立即发生变化，而位置只会在您使用该功能的瞬间发生变化。有没有办法在 JS 中为 style.left 使用“过渡持续时间”？还是我必须使用其他东西才能使 div 平滑移动？

回答:

解决方案是，要让 transition-duration 做任何事情，都必须事先声明它。这意味着因为我没有在非动画状态下指定位置，所以移动是立即完成的。另一种解决方案是使用 transition: left 0.5s 因为这不需要任何 CSS 样式。

Answer 1

“left”的 CSS 在添加到 JS 之前没有在 CSS 中声明。此外，“100”是 CSS 位置的无效值(请注意以下示例中添加的“px”)。

JSFiddle:https://jsfiddle.net/MissionMike/adj4j6tr/

HTML:

<div id="cart">TEST</div>

CSS:

#cart {
  position: relative;
  transition-duration: 0.5s;
  background-color: green;
  left: 0;
}

JS:

document.getElementById("cart").innerHTML = "test2";
document.getElementById("cart").style.left = "100px";
document.getElementById("cart").style.background = "gray";