How to apply width ease-in-out transition to element?

Question

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>

Answer 1

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>

How to apply width ease-in-out transition to element?

Question

1 answers

solution1
0 ACCPTED 2022-07-21 20:34:29

How to apply width ease-in-out transition to element?

Question

1 answers

solution1 0 ACCPTED 2022-07-21 20:34:29

solution1
0 ACCPTED 2022-07-21 20:34:29