使用transition-delay选项（css）和JS进行div移动

Question

我想创建一个可以平滑移动块的函数。 我更喜欢为此使用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秒内改变，而不是立即改变，而位置只是在您使用该功能的瞬间改变。 有没有一种方法可以将'transition-duration'用作JS中的style.left？ 还是我必须使用其他方法使div平稳移动？

Answer 1

使用过渡：左0.5s线性； 因为您还没有说要转换的属性。

另外，将要更改的样式放在类中，然后使用js应用该类。

另外，您可能希望在相对容器内转换绝对项目，而不是对相对元素应用“ left”。

Answer 2

在JS中添加“ left”的CSS之前，没有在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";