値を設定しない値に追加するには

Question

左の属性を50に設定しないと、50の値を追加できません。

document.getElementById("myDiv").style.left = "50px"; 

私は、ピクチャスライダの滑らかなアニメーション効果を得ようとしています。

Answer 1

値を解析して値を追加できます。

document.getElementById("myDiv").style.left = 
    (parseInt(document.getElementById("myDiv").style.left, 10) + 50) + 'px'; 

Answer 2

私が質問を正しく理解していれば、これは純粋なCSSソリューションです。

.slide { 
 
animation-name: slide; 
 
animation-iteration-count: 1; 
 
animation-duration: 5s; /* or: Xms */ 
 
animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ \t 
 
margin-left:50px; 
 
} 
 
@keyframes slide { 
 
    0% { opacity: 0;position:relative;margin-left:-100% } 
 
    5% { opacity: 0;position:relative;margin-left:0 } 
 
    100% { opacity: 1;position:relative;margin-left:50px; } 
 
}

<div class="slide">this is a slowly sliding div</div>

あなたは、たとえば、ボタンのクリック操作ではJavaScriptを使用したいアニメーション効果を持つクラス追加することができます。

document.getElementById("myDiv").classList.add("slide");

.slide { 
 
animation-name: slide; 
 
animation-iteration-count: 1; 
 
animation-duration: 5s; /* or: Xms */ 
 
animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ \t 
 
margin-left:50px; 
 
} 
 
@keyframes slide { 
 
    0% { opacity: 0;position:relative;margin-left:-100% } 
 
    5% { opacity: 0;position:relative;margin-left:0 } 
 
    100% { opacity: 1;position:relative;margin-left:50px; } 
 
}

<div id="myDiv">this is a slowly sliding div</div>

以下のスニペットで

document.getElementById("myButton").addEventListener('click' , function(e) { 
    e.preventDefault(); 
    document.getElementById("myDiv").classList.add("slide"); 
}); 

ように