使用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";