なぜボーダーが適用され、削除されますか？

Question

私はdivにボーダーを与えていますが、ボーダーを設定すると自動的に削除されます。なぜですか？

PD：機能する最後の呼び出しで境界線を設定するとわかりますが、なぜこれが起こるのか知りたいのですが。

var padding = 0, e = document.getElementById("box"); 
 
function box(){ 
 
if(padding < 80) { padding ++; 
 
e.setAttribute("style","padding:"+padding+"px"); 
 
setTimeout(()=>{box();},50); 
 
} 
 
if(padding%7 === 0) { // 
 
e.style.border = "2px solid purple"; 
 
} 
 
} 
 
window.addEventListener("DOMContentLoaded",box);

#box { 
 
width: 50px;height:50px;background-color:pink; 
 
}

<div id="box">

Answer 1

e.setAttribute("style","...")（それは完全にstyleをリセットするので）あなたが他の場所で設定style.borderを上書きします。

style.* = "..."のみを使用してください。

代わりに、代わりにCSSアニメーションを使用してください。