Al intentar aplicar una transición a esta imagen, no puedo entender por qué esto no funciona y el estilo de ancho se aplica instantáneamente en lugar de hacer la transición desde su ancho actual como lo esperaba la función.
<!DOCTYPE html> <html> <body> <img style="" id="myImg" src="https://ae01.alicdn.com/kf/S9c1b79c0b59442d0b36ea6aea9cd266fO/Super-Cat-Bed-Warm-Sleeping-Cat-Nest-Soft-Long-Pluh-Best-Pet-Dog-Bed-For-Dogs.jpg.jpg" height="98"> <p>Click the button to change the width of the image to 300px.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("myImg").style.display = "flex"; document.getElementById("myImg").style.transition = "width 2s"; document.getElementById("myImg").style.width = "300px"; } </script> </body> </html>El problema que tiene es que el atributo en el que está realizando la transición debe declararse inicialmente. No importa si está en línea o en CSS.
Así que cambié su código con un ancho aleatorio en lugar de alto, y ahora cambia.
function myFunction() { document.getElementById("myImg").style.display = "flex"; document.getElementById("myImg").style.transition = "width 2s"; document.getElementById("myImg").style.width = "300px"; } <img style="" id="myImg" src="https://ae01.alicdn.com/kf/S9c1b79c0b59442d0b36ea6aea9cd266fO/Super-Cat-Bed-Warm-Sleeping-Cat-Nest-Soft-Long-Pluh-Best-Pet-Dog-Bed-For-Dogs.jpg.jpg" width="105"> <p>Click the button to change the width of the image to 300px.</p> <button onclick="myFunction()">Try it</button>