Attempting to apply a transition to this image, I can't understand why this does not work and the width styling is applied instantly versus transitioning out from its current width as expected by the function.
<!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>The problem that you are having is that the attribute you are transitioning on, should be declared initially. No matter if its inline or in CSS.
So I changed your code with a random width instead of height, and it transitions now.
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>