I want the border of the box to have a slowly expanding animation when displaying icons, but it seems that the animation is invalid because the width is not set. In terms of business/UI, the width cannot be set here because the width of the box needs to vary with the number of internal elements
<body><div id="box" style="border: 1px solid red; display: inline-flex"><div id="icon">icon_icon</div><div id="text">Text Text Text Text Text</div></div><button id="button">显示/隐藏</button></body><script type="javascript"> document.getElementById("button") .addEventListener("click", function () { let exist = document.getElementById("icon"); if (exist) { exist.remove() } else { document.getElementById("box") .insertAdjacentHTML('afterbegin', "<div id='icon'>icon_icon </div>") } });</script>