遷移遅延オプション（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秒の代わりの変化位置は機能を使用する瞬間を変えるだけです。 JSのstyle.leftに 'transition-duration'を使用する方法はありますか？それとも、divを円滑に動かすために他の何かを使わなければならないのですか？

Answer 1

"left"のCSSは、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"; 

Answer 2

使用遷移：左0.5s線形;あなたが移行しているプロパティは何も言っていないので

また、変更するスタイルをクラスに入れて、代わりにjsでクラスを適用します。

また、絶対的な項目を相対的なコンテナ内で遷移させ、相対的な要素に 'left'を適用しないことをお勧めします。