Estoy tratando de suavizar una animación de barra de progreso cuando configuro el nuevo ancho usando, como ejemplo, document.querySelector('#mydiv').style.width = '20%' pero simplemente se actualiza al nuevo ancho instantáneamente en lugar de seguir la transición. Esperaba que el ancho se animara al nuevo valor, tal vez me estoy perdiendo algo obvio o tengo un malentendido básico de la propiedad de transición. Aquí está el elemento, se agradece el consejo:

 setTimeout(function() { document.querySelector('#mydiv').style.width = '20%'; }, 500);

 #mydiv { position: absolute; top: 0; left: 0; width: 0; height: 0.4rem; background: orange; transition: width 1s ease-out; }

 <div id="mydiv"></div>